Question

maybe it has been solved somewhere on this website but I did not find the answer. Maybe this is because I am pretty new to jQuery and don’t really know what may cause the problem.

So I have this code that I add on my WordPress Website. I found the original code on this website and I tried to adjust it to my need.

(function(){

    var j = 0;
    var delay = 2200; //millisecond delay between cycles

    jQuery.fn.rotateImg = function() {
        var list = jQuery(this);
        function cycleThru() {
            var jmax = list.length -1;
            jQuery(list.selector + ":eq(" + j + ")")
                .animate({"opacity" : "1"} ,800)
                .animate({"opacity" : "1"}, delay)
                .animate({"opacity" : "0"}, 800, function(){
                    (j == jmax) ? j=0 : j++;
                        cycleThru();
                });
        }
        cycleThru();

    };

    jQuery(document).ready(function() {
        jQuery(".test ul li, ul.logos li").rotateImg();
    });

})();

It works fine when I am only calling it with one selector but when I add a second one the opacity change one multiple lists item at the same time (I think it’s half on the list item). My first unordered list has only two list item so I guess the bug has to do with it.

I am sorry for my bad english by the way and thank you for your help.

Oh… and I am using jQuery version 1.7.2

Edit : I have been able to replicate my bug. You can see it here : http://jsfiddle.net/selbh/5kDZn/18/

Answer 1

NEW VERSION

http://jsfiddle.net/selbh/5kDZn/18/

(function($){

    var j = 0;
    var delay = 500; //millisecond delay between cycles


    $.fn.rotateImg = function() {

        $(this).each(function () {

            var list = $(this).find('li');
            function cycleThru() {
                var jmax = list.length -1;
                list.eq(j)
                    .animate({"opacity" : "1"} ,800)
                    .animate({"opacity" : "1"}, delay)
                    .animate({"opacity" : "0"}, 800, function(){
                        (j == jmax) ? j=0 : j++;
                            cycleThru();
                    });               
            }
            cycleThru();

        });



    };

    $(function() {
        $(".test ul, ul.logos").rotateImg();
    });


})(jQuery);​

OLD VERSION:

I’m not sure what you are trying to achieve. Maybe this is what you want:

http://jsfiddle.net/selbh/5kDZn/17/

(function($){

    var j = 0;
    var delay = 500; //millisecond delay between cycles


    $.fn.rotateImg = function() {

        var list = $(this);
        function cycleThru() {
            var jmax = list.length -1;
            list.eq(j)
                .animate({"opacity" : "1"} ,800)
                .animate({"opacity" : "1"}, delay)
                .animate({"opacity" : "0"}, 800, function(){
                    (j == jmax) ? j=0 : j++;
                        cycleThru();
                });               
        }
        cycleThru();

    };

    $(function () {
        $(".test ul li, ul.logos li").rotateImg();
    });



})(jQuery);​