Question

也许它已在这个网站的某个地方得到解决，但我找不到答案。也许这是因为我对jQuery很新，并且不知道可能导致问题的原因。

所以我在Wordpress网站上添加了这段代码。我在这个网站上找到了原始代码，并尝试根据自己的需要进行调整。

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

})();

当我只使用一个选择器调用它时它工作正常但是当我添加第二个时，不透明度会同时更改一个多个列表项（我认为它是列表项的一半）。我的第一个无序列表只有两个列表项，所以我猜错误与它有关。

顺便说一下，我很抱歉我的英语不好，谢谢你的帮助。

哦......我正在使用jQuery 1.7.2版

编辑：我能够复制我的错误。你可以在这里看到它： http://jsfiddle.net/selbh/5kDZn/18/

Answer 1

新版本

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：

我不确定你想要实现的目标。也许这就是你想要的：

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);

Jquery Multiple Selector调用淡入淡出功能

1 个答案: