jQuery作出手風琴效果

時間 2019-11-18

原文原文鏈接

今天學到JQuery中的遍歷-siblings，便手癢作了個手風琴的動態效果，有一點收穫，分享給你們。mouseout的時候必定要記得opacity必須設置，否則li的opacity會保持mousemove時的狀態。代碼有不足的地方歡迎你們踊躍的提意見。javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>siblings遍歷</title>
        <style type="text/css">
            ul{
                overflow: hidden;
            }
            ul li{
                text-align: center;
                list-style: none;
                float: left;
                width: 50px;
                height: 100px;
                margin: 10px auto;
                background: #444444;
                border: 0.5px solid #ffffff;
            }
        </style>
        <script type="text/javascript" src="../vendor/jquery-1.11.3.min.js"></script>//引入jQuery
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <script type="text/javascript">
            $("ul li").mouseover(function(){
                $(this).animate({
                    opacity:"0.8",
                    width:"55px",
                    height:"110px"})
                .siblings().css({
                    opacity:"0.4",
                    width:"45px",
                    height:"90px"});
            });
            $("ul").mouseout(function(){
                $("ul li").css({
                    background:"#444444",
                    width: "50px",
                    height: "100px",
                    opacity:"1",//必定要記得透明度也得設置，如若不設置，透明度會保持你在mousemove的時候的狀態
                })
            });
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。