javascript - 在滚动时为图像设置动画

Question

我写了一个小的 div slider ，它每 5 秒滚动一次放在 div 中的图像，并且侧面还有两个箭头可以立即触发滑动。好吧，这并不重要，当图像向左或向右滑动或每当它们自动滑动时，我希望在图像上发生某种动画，例如淡入淡出或剪切，而不仅仅是滑动。

Javascript 代码:

 <script type="text/javascript">
            function createSlider(el_left, el_right, items) {
    var index = 0;
                var refreshId;
                var items=$('.box');
                var restartAnimation = function() {
                    clearInterval(refreshId);
                    refreshId = setInterval( function() 
                    {    
                        var $this = items.eq(index);
        $this.animate({
            left: '-50%'
        }, 500);
        index = (index + 1) % items.length;
        var $next = items.eq(index);
        $next.css('left', '150%');
        $next.animate({
            left: '50%'
        }, 500);
                    },5000);
                }

                restartAnimation()

    el_left.click(function() {
                    restartAnimation();
        var $this = items.eq(index);
        $this.animate({
            left: '-50%'
        }, 500);
        index = (index + 1) % items.length;
        var $next = items.eq(index);
        $next.css('left', '150%');
        $next.animate({
            left: '50%'
        }, 500);
    });
    el_right.click(function() {
        restartAnimation();
        var $this = items.eq(index);
        $this.animate({
            left: '150%'
        }, 500);
        index = (index - 1) % items.length;
        var $next = items.eq(index);
        $next.css('left', '-50%');
        $next.animate({
            left: '50%'
        }, 500);
    });
}

createSlider($('.Animate'), $('.Animate2'), $('.box'))
        </script>

HTML代码:

        <div id="container" class="imageSlider">

          <div id="box1" class="box"><img style="height: 190px;width: auto;vertical-align: middle;margin: 0px 50px 12px 0px;" src="images/image1.png" class="emages"></div>
          <div id="box2" class="box"><img style="height: 185px;width: auto;vertical-align: middle;" src="images/image2.png" class="emages"></div>
          <div id="box3" class="box"><img style="height:264px;margin-top:0px;margin-left: 200px;width:auto;" src="images/image3.png" class="emages"></div>
          <div id="box4" class="box"><img style="height: 265px;width: auto;vertical-align: middle;margin: 51px 60px 0 -31px;" src="images/image4.png" class="emages"></div>
          <div id="box5" class="box"><img style="height: 194px;width: auto;vertical-align: middle;" src="images/image5.png" class="emages"></div>
          <div id="box6" class="box"><img style="height: 230px;width: auto;vertical-align: middle;margin: -50px 50px;" src="images/image6.png" class="emages"></div>
          <div id="box7" class="box"><img style="height: 230px;width: auto;vertical-align: middle;margin: -50px 50px;" src="images/image7.png" class="emages"></div>

     <div><input type="image" id="animate1"  src="nav-left.png" class="Animate"></div>
     <div><input type="image" id="animate2" src="nav-right.png" class="Animate2"></div>

</div>

CSS 代码:

#container {
    position: absolute;
    margin: 120px auto;
    padding: 0px;
    width: 700px;
    height: 350px;
    overflow: hidden;
    left: 24%;

}

.box {
    position: absolute;
    width: 100%;
    height: 300px;
    line-height: 300px;
    font-size: 15px;
    text-align: center;    
    left: 150%;
    top: 84px;
    margin-left: -48%;
    color: white;
}

#box1 {

    left: 50%;
}

#box2 {

}

#box3 {

}

#box4 {

}

#box5 {

}
#box6 {

}
#box7{

}

所以这是我的完整代码。它工作正常，我唯一想要的是，当图像滚动时，我希望它们以样式或一些动画滚动。

Answer 1

我会做以下事情:

1) 添加一个类来处理您的 CSS 淡入淡出

.fade-in {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade-out {
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

2) 然后在您的代码中的适当位置添加/删除类，例如:

$this.removeClass('fade-in');
$this.addClass('fade-out');

$next.removeClass('fade-out');
$next.addClass('fade-in');