CODEWITHSUNDEEP
javascriptjquery
Qchmqs
Qchmqs

Reputation: 1805

how make the animation runs in a infinite loop

i have the current code running

MyTry

what i want to do is to make the animation go in a infinite loop how to do ??

i want to call the same function again or i don't know what

just that the animation go again and again when finished the last element

(function($) {
$.fn.fade = function() {
        return this.each(function(index, item) {
            var $this = $(this).siblings();
            $(item).hide().stop();
            if ($(item).index() == $(this).siblings().length - 1) {
                $(item).delay(5000 * index).fadeIn('slow').delay(3500).fadeOut('slow', function() { 
                    /* here is the last element finishing  */
                });

            } else {
                $(item).delay(5000 * index).fadeIn('slow').delay(3500).fadeOut('slow');

            }
        });
    };
    
})(jQuery);
 $('.tst').fade();

EDIT : i left the animation running and came to check for answers so i saw a strange behavior

how to fix that as well

Upvotes: 3

Views: 2034

Answers (2)

Yoshi
Yoshi

Reputation: 54649

Try this (though you'll have to adept it to your plugin-structure):

var elements = $('ul > li');
(function fade(idx) {
  $(elements).eq(idx || 0).fadeIn(1500).fadeOut(1500, function () {
    fade(idx < elements.length - 1 ? idx + 1 : 0);
  });
}());

Upvotes: 2

pimvdb
pimvdb

Reputation: 154818

The most straight-forward way is giving the function a name and call it again: http://jsfiddle.net/pimvdb/SxTgy/4/.

$.fn.fade = function x() {
        var _this = this; // keep the 'this' value

After the final animation, call x again, passing the this value it had:

x.call(_this); // same as x() but it sets the 'this' value inside it correctly

Note that such "named function expressions" have certain quirks on IE8-.

Upvotes: 5

Related Questions