一个手风琴效果的jquery动画

来源：互联网发布：面向对象编程的优势编辑：程序博客网时间：2024/05/21 12:48
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        *{            padding:0px;            margin:0px;        }        .li_list{            float:left;            overflow:hidden;            list-style:none;            width:100px;            height:300px;        }        .block{            width:602px;            height:300px;            float:left;            text-align:center;            line-height:300px;            background-color: rgba(255, 165, 0, 0.38);        }        .back{            width:500px;            height:300px;            border:1px solid #ccc;            float:left;        }        .li_list img{            width:100%;            height:100%;        }        .li_mo{            width:602px;        }        .animal{            float:left;            width:100px;            height:300px;            display:inline-block;        }    </style></head><body><ul>    <div class="clear"></div>    <li class="li_list li_mo" >        <div class="block">            <span class="animal">萌宠</span>            <div class="back">                <img src="7.25/img/0.jpg">            </div>        </div>    </li>    <li class="li_list"><div class="block"><span class="animal">萌宠</span><div class="back"><img src="7.25/img/1.jpg"></div></div></li>    <li class="li_list"><div class="block"><span class="animal">萌宠</span><div class="back"><img src="7.25/img/2.jpg"></div></div></li>    <li class="li_list"><div class="block"><span class="animal">萌宠</span><div class="back"><img src="7.25/img/3.jpg"></div></div></li></ul><script src="7.25/jquery-3.0.0.js"></script><script type="text/javascript">    $(function(){        $(".li_list").each(function(){        //each遍历            $(this).mouseenter(function(){                       $(this).stop().animate({"width":"600px"},500,"linear").siblings().stop().animate({"width":"100px"},500,"linear")            })//当鼠标进入时，让改元素撑开，而其他的元素合住，stop()用来防止当鼠标晃动多次时带来的延迟的bug           })    })</script></body></html>
阅读全文
0 0