Staggering CSS Animations

后端 未结 3 1767
一个人的身影
一个人的身影 2021-01-07 12:41

I have a CSS animation that I want to be applied in 200ms intervals. I\'ve set up the CSS like this:

.discrete {
    position:relative;
    opacity:1;

    -         


        
3条回答
  •  挽巷
    挽巷 (楼主)
    2021-01-07 13:40

    Try using the jQuery animation queue: http://jsfiddle.net/gwwar/7zm6q/2/

    function createWorkQueueFunction($element) {
        return function(next) {
            $element.addClass("out");
            next();
        };
    }
    
    $('button').click(function() {
        var queue = $({}); //use the default animation queue
        $(".discrete").each(function() {
            queue.queue(createWorkQueueFunction($(this)));
            queue.delay(200);
        });
    });
    

    But why don't your examples work?

    The reason why the following doesn't work is because jQuery will immediately add the 'out' class after adding a 200 ms delay to the fx queue. In other words, delay() will not pause items that are not added to a queue. Please see: What are queues in jQuery? for more information about how jQuery queues work.

    $('.discrete').each(function() { $(this).delay(200).addClass('out'); });

    In the second example, you're adding the same timeout to each of the .discrete elements. So after roughly 200ms each one will have a class added to it at just about the same time. Instead you probably would have wanted to set a timeout of 200ms, then 400ms, then 600ms and so on for each element.

    $('.discrete').each(function() { var theNode = $(this);
    setTimeout(function() { theNode.addClass('out'); }, 200); });

提交回复
热议问题