Question

我有135个html元素，我想随意淡入淡出，所以我为它编写了这段代码：

setInterval(function() {
    ggg = Math.floor(Math.random() * (50 - 1 + 1) + 1);
    $("#f" + ggg).fadeIn(500, function() {  });
    $("#f" + ggg).fadeOut(500);
}, 300);


setInterval(function() {
    ggg = Math.floor(Math.random() * (100 - 50 + 1) + 50);
    $("#f" + ggg).fadeIn(500, function() {  });
    $("#f" + ggg).fadeOut(500); 
}, 300);

setInterval(function() {
    ggg = Math.floor(Math.random() * (135 - 100 + 1) + 100);
    $("#f" + ggg).fadeIn(500, function() {   });
    $("#f" + ggg).fadeOut(500);
}, 300);

但问题是，即使在Windows笔记本电脑上没有问题，它在Macbook Pro上需要占我i7的50％。有人可以重写代码以获得更好的性能吗？

Answer 1

animate = function() {
  ggg = Math.floor(Math.random() * (100 - 50 + 1) + 50);
  $("#f" + ggg).fadeIn(500, function() {
  $("#f" + ggg).fadeOut(500,animate); 
  })
}
animate();

要延迟，请进行此修改：

  $("#f" + ggg).delay(300).fadeOut(500,animate);

您也可以在开始另一个动画之前使用.stop(true,true)清除队列。

Answer 2

$("#f" + ggg).animate({ opacity: 0 }, 500, function() {
    $("#f" + ggg).animate({ opacity: 1 }, 500)
});

也许你的动画速度越来越快，但是idk。 javascript甚至可以减慢i7（可能与浏览器相关的性能？）

，这种情况并不少见

Answer 3

除了每300毫秒启动1秒动画（这没什么意义）之外，您还希望fadeIn和fadeOut函数同步运行。

此代码：

$("#f" + ggg).fadeIn(500, function() {  });
$("#f" + ggg).fadeOut(500);

将开始半秒淡入，然后立即以半秒淡出来覆盖它。我甚至不确定那是做什么的。

您传递给fadeIn的空函数是完成时要执行的回调...那就是您要放置fadeOut的位置：

$("#f" + ggg).fadeIn(500, function() {
    $("#f" + ggg).fadeOut(500);
});

Answer 4

我的猜测是，原因是动画电话的堆叠。

设置一个Interval，每300毫秒调用一个函数，启动2个动画，持续时间为500 + 500毫秒。

此外，您可以在一个功能中完成所有3个动画调用。也许可能有更好的方法来选择你想要动画的对象？随机可能不是最有效的方式。

也许这可能已经成功（未经测试）

function animateStuff(){
    ggg = Math.floor(Math.random() * (50 -1 + 1) + 1);
    $("#f" + ggg).fadeOut(500, function(){
        $(this).fadeIn(500);
    });

    ggg = Math.floor(Math.random() * (100 -1 + 1) + 1);
    $("#f" + ggg).fadeOut(500, function(){
        $(this).fadeIn(500);
    });

    ggg = Math.floor(Math.random() * (135 -1 + 1) + 1);
    $("#f" + ggg).fadeOut(500, function(){
        $(this).fadeIn(500);
    });
}

setInterval(function(){
    animateStuff();
}, 1000);

Answer 5

为您的元素提供一个类，缓存您的元素，随机化您的jQuery对象，然后将它们淡入淡出。

var els = $(".random");
var $random = shuffleArray( els );

$random.each( function( ) {
    var max = 4000;
    var min = 1000;
    var duration = Math.floor( Math.random() * ( max - min + 1) + min );
    $(this).delay( duration ).fadeTo( 1000, 1, function( ) {
        $(this).delay( duration ).fadeTo( 1000, 0 );
    });
});

找到了混乱功能here

/**
 * Randomize array element order in-place.
 * Using Fisher-Yates shuffle algorithm.
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

小提琴here

jQuery fadeIn和fadeOut占用处理器的50％

5 个答案: