Question

我正在尝试根据div中的图像创建动画。我希望三分之一的图像出现，然后消失，然后出现另外三分之一的图像，等等。所以我把图像划分为3个不同的类。

我对此进行了一些研究，发现最好的方法是设置不透明度，如本文http://www.catchmyfame.com/2010/08/31/jquery-hide-vs-fadeout-vs-animate/

所示

问题是当我运行我的代码时，所有动画一次运行，并且图像不会在屏幕上停留很长时间。任何朝着正确方向前进的帮助都将受到赞赏。

$(document).ready(function() {
        $(".hardware > img").css( "opacity", "0" );
        setInterval(function() {
            $('.show1').animate({opacity:1}, 1000)
        }, 4000);
        setInterval(function() {
            $('.show1').animate({opacity:0}, 1000)
        }, 1000);
        setInterval(function() {
            $('.show2').animate({opacity:1}, 1000)
        }, 4000);
        setInterval(function() {
            $('.show2').animate({opacity:0}, 1000)
        }, 1000);
        setInterval(function() {
            $('.show3').animate({opacity:1}, 1000)
        }, 4000);
        setInterval(function() {
            $('.show3').animate({opacity:0}, 1000)
        }, 1000);
    });

编辑：经过一些输入后，我想出了一些有效的代码，虽然它最终有点随机而且不精确：

$(document).ready(function() {
        $(".hardware > img").css( "opacity", "0" );
        setInterval(function() {
            $('.show1').animate({opacity:1}, 1000).delay(18000);
            $('.show1').delay(6000).animate({opacity:0}, 1000).delay(12000);
            $('.show2').delay(7000).animate({opacity:1}, 1000).delay(11000);
            $('.show2').delay(12000).animate({opacity:0}, 1000).delay(6000);
            $('.show3').delay(13000).animate({opacity:1}, 1000).delay(5000);
            $('.show3').delay(18000).animate({opacity:0}, 1000);
        }, 0);
    });

Answer 1

你可以试试这个。我相信你想要的东西

$(function(){

    $('.hardware img').hide().each(function(){

        // Get the number from the img class. For show1 will be 1, for show2 will be 2 etc.

        var multiplier = $(this).prop('class').replace( /^\D+/g, '');

        // Use multiplier in delay. For show1 element will be 1000, for show 2 eill be 2000 etc.

        $(this).delay(multiplier * 1000).fadeIn().fadeOut();
    });

});

您还可以将图像CSS设置为img {display:none;}，以避免使用jquery隐藏它们。

Answer 2

请参阅http://jsfiddle.net/xoc2s5x7/

您需要根据自己的风格调整div。您尝试的代码的问题是您在图像上有类，因此一个动画正在更改多个图像并且多次触发回调，因此它看起来是随机的。您需要将图像放在div中并为div设置动画。只要确保你一次动画一个div。

function animateAll() {
    $(".show1").animate({opacity:1}, 1000, 
    function(){$(".show1").animate({opacity:0}, 1000, 
    function(){ $(".show2").animate({opacity:1}, 1000, 
    function() {$(".show2").animate({opacity:0}, 1000, 
    function(){ $(".show3").animate({opacity:1}, 1000, 
    function(){$(".show3").animate({opacity:0}, 1000, 
    function(){animateAll();});}); });}); });});
};

Javascript / Jquery多个元素不透明度动画

2 个答案: