jq动画

作者: sunflower_07 | 来源:发表于2018-10-30 09:54 被阅读0次

前端
For循环线程与JQ动画结合的问题
jq动画
jq动画
JQ 动画
JQ 动画
jqueryTools jq小方法
JQ
JQ动画队列
13.JQ动画基础

代码呈上，多多指教：

<!DOCTYPE html>
<html>

<head>
    <title>demo</title>
</head>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.box {
    width: 1200px;
    margin: 50px auto;
}

.box_li {
    width: 200px;
    height: 200px;
    float: left;
}

ul .box_li:nth-child(1) {
    background-color: pink;
    background: url(1.jpg) no-repeat center;
    background-size: 100% 100%;
}

ul .box_li:nth-child(2) {
    background-color: pink;
    background: url(2.jpg) no-repeat center;
    background-size: 100% 100%;
}

ul .box_li:nth-child(3) {
    background-color: pink;
    background: url(3.jpg) no-repeat center;
    background-size: 100% 100%;
}

ul .box_li:nth-child(4) {
    background-color: pink;
    background: url(4.jpg) no-repeat center;
    background-size: 100% 100%;
}

ul .box_li:nth-child(5) {
    background-color: pink;
    background: url(5.jpg) no-repeat center;
    background-size: 100% 100%;
}

ul .box_li:nth-child(6) {
    background-color: pink;
    background: url(6.jpg) no-repeat center;
    background-size: 100% 100%;
}
.op{
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background-color: black;
}
h1{
    color: #fff;
    width: 50px;
    margin: 0 auto;
    display: block;
    font-size: 26px;
    word-wrap:break-word;
    letter-spacing: 20px;
}
</style>

<body>
    <div class="box">
        <ul>
            <li class="box_li">
                <div class="op">
                    <h1>阳光</h1>
                </div>
            </li>
            <li class="box_li">
                <div class="op">
                    <h1>正好</h1>
                </div>
            </li>
            <li class="box_li">
                <div class="op">
                    <h1>,</h1>
                </div>
            </li>
            <li class="box_li">
                <div class="op">
                    <h1>微风</h1>
                </div>
            </li>
            <li class="box_li">
                <div class="op">
                    <h1>不燥</h1>
                </div>
            </li>
            <li class="box_li">
                <div class="op">
                    <h1>。</h1>
                </div>
            </li>
        </ul>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript">
    $(".box_li").hover(function() {
        $(this).stop().animate({ "width": '400px' }, 300).siblings().stop().animate({ "width": '160px' }, 200);
        $(this).find(".op").hide();
    },function(){
        $(this).stop().animate({ "width": '200px' }, 200).siblings().stop().animate({ "width": '200px' }, 200);
        $(this).find(".op").show();
    })
    </script>
</body>

</html>

结果如下：

结果