Javascript/jquery多元素不透明动画

我想创建一个基于div内图像的动画。我想要三分之一的图像出现，然后消失，然后出现另外三分之一的图像等。因此，我将图像分为3个不同的类别。Javascript/jquery多元素不透明动画

我已经研究了一点关于它的发现，最好的办法是动画不透明度，如本文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); 
    });

来源

2014-10-02 Tomás Antunes

而不是使用'setInterval'可以传递函数的动画将动画完成'$ .animate后运行（{不透明度：0}，1000，函数（）{//其他动画}）' – 2014-10-02 11:46:09

对不起，那对我来说真的没用。检查编辑。 – 2014-10-02 12:03:21

你可以试试这个。我相信你想

$(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。

来源

2014-10-02 12:20:12 tliokos

它看起来像一些优秀的代码，但它不完全是我所需要的。我选择不使用淡入和显示，因为它会改变图像网格的布局。除此之外，我需要它成为一个循环，我需要图像在屏幕上停留5秒钟，然后才能淡出。 – 2014-10-02 13:19:14

无论如何，我设法使用您向我展示的延迟方法做出了我想要的东西。它没有出来非常精确，但它现在会做。 – 2014-10-02 14:01:03

见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();});}); });}); });}); 
};

来源

2014-10-03 09:15:17 artm

Javascript/jquery多元素不透明动画

回答

相关问题