jQuery Fade In и Fade Out Loop назад к: first sibling

JS Fiddle находится здесь: http://jsfiddle.net/8nqkA/2/

HTML

<div>
<div class="show">Test 1</div>
<div class="hidden">Test 2</div>
<div class="hidden">Test 3</div>
<div class="hidden">Test 4</div>
</div>

jQuery

$(document).ready(function() {
    myFunc($(".show"));
});

function myFunc(oEle)
{
       oEle.fadeOut('slow', function(){
            if (oEle.next())
            {
                oEle.next().fadeIn('slow', function(){
                   myFunc(oEle.next());
                });
            }
           else
               oEle.siblings(":first").fadeIn('slow', function(){
               myFunc(oEle.siblings(":first"));
               });
        });
}

CSS

.hidden {
    display: none;
}

Попытка вернуть его к тесту 1 после его завершения, но не работает. Просто хочу, чтобы все началось сначала, что в этом плохого?


jquery fadein fadeout
person Solomon Closson    schedule 21.02.2013    source источник
comment
if (oEle.next()) -- Попробуйте проверить свойство length. if (oEle.next().length)   -  person ahren    schedule 21.02.2013
comment
@ahren, я вижу, что твое решение работает. Почему бы вам не опубликовать в качестве ответа?   -  person deadlock    schedule 21.02.2013
comment
@deadlock - я сделаю это ... но только потому, что два других уже опубликованных ответа не дают ничего полезного. Они просто копируют это решение.   -  person ahren    schedule 21.02.2013
comment
Хорошо, жду тебя, ахрен, и спасибо :)   -  person Solomon Closson    schedule 21.02.2013

Ответы (2)


arrow_upward
1
arrow_downward 

if (oEle.next()){ // This needs to be oEle.next().length
    oEle.next().fadeIn('slow', function(){
        myFunc(oEle.next());
    });
}else{ // You should wrap this in a block
    oEle.siblings(":first").fadeIn('slow', function(){
        myFunc(oEle.siblings(":first"));
    });
}

Причина, по которой мы тестируем .length, заключается в том, что .next(), как и большинство методов jQuery, возвращает jQuery, который нельзя протестировать напрямую. Вы можете думать об этом как о массиве, поэтому свойство .length предоставляет нам, сколько элементов находится в текущем выборе.

Мы также должны поместить ваш код else в блок ({..}), потому что следующий код занимает более одной строки.

person ahren    schedule 21.02.2013
comment
Классный ответ бро! Спасибо за информацию об этом, определенно делает этот ответ более качественным, чем другие! - person Solomon Closson; 21.02.2013

arrow_upward
1
arrow_downward

В вашем коде-

$(document).ready(function() {
    myFunc($(".show"));
});

    function myFunc(oEle)
    {
           oEle.fadeOut('slow', function(){
                if (oEle.next().length)
                {
                    oEle.next().fadeIn('slow', function(){
                       myFunc(oEle.next());
                    });
                }
               else
                   oEle.siblings(":first").fadeIn('slow', function(){
                   myFunc(oEle.siblings(":first"));
                   });
            });
    }

Проверьте здесь демо-http://jsfiddle.net/8nqkA/3/.

person Manoz    schedule 21.02.2013