jQuery: Schleife durch li Fading jeweils in dann

Question

Ich versuche, eine Reihe von Listenelementen einblenden, halten und dann ausblenden. Dank einer weiteren Abfrage hier habe ich den folgenden Code haben:

function fadeInOut(item) { 
 
    item.fadeIn(1000).delay(3000).fadeOut(1000, function() { 
 
    if (item.next().length > 0) // if there is a next element 
 
    { 
 
     fadeInOut(item.next()); 
 
    } // use it 
 
    else { 
 
     fadeInOut(item.siblings(':first')); 
 
    } // if not, then use go back to the first sibling 
 
    }, 3000); 
 

 
} 
 

 
fadeInOut(jQuery('#straplines li:first-child'));

#straplines li { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="straplines"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
</ul>

jedoch in den ersten Punkt zu verblassen scheint dann stoppen. Sobald ich es in eine Wordpress-Vorlage platziere, blendet es das erste Element ein, das verschwindet (nicht ausblendet) und stoppt.

Irgendwelche Ideen dazu?

Answer 1

Sie benötigen die 3000 vom Ende Ihrer fadeout Funktion zu entfernen:

function fadeInOut(item) { 
 
    item.fadeIn(1000).delay(3000).fadeOut(1000, function() { 
 
    if (item.next().length) // if there is a next element 
 
    { 
 
     fadeInOut(item.next()); 
 
    } // use it 
 
    else { 
 
     fadeInOut(item.siblings(':first')); 
 
    } // if not, then use go back to the first sibling 
 
    }); 
 

 
} 
 

 
fadeInOut(jQuery('#straplines li:first-child'));

#straplines li { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id="straplines"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
</ul>

Updated fiddle

Answer 2

Das letzte Argument Sie fadeOut sind vorbei ungültig ist.

function fadeInOut(item) { 
    item.fadeIn(1000).delay(3000).fadeOut(1000, function() { 
    if (item.next().length > 0) // if there is a next element 
    { 
     fadeInOut(item.next()); 
    } // use it 
    else { 
     fadeInOut(item.siblings(':first')); 
    } // if not, then use go back to the first sibling 
    }); 

} 

Fiddle: https://jsfiddle.net/b2brfd0f/7/

Wenn Sie an der Konsole ausgesehen hatte, würden Sie eine Menge Fehler gesehen haben. Ich denke, es wurde versucht, es wie eine Lockerung zu behandeln.

Hier sehen Sie alle verschiedenen Parameteroptionen.

http://api.jquery.com/fadeout/

Dies ist die Unterschrift der Code haben Sie verwenden wollten: http://api.jquery.com/fadeout/#fadeOut-duration-easing-complete

Es erwartet immer, dass das letzte Argument eine Funktion ist. Aber da es 3 Parameter hatte, versuchte es, Ihre komplette Funktion zu behandeln, als wäre es eine Lockerung und Ihr ungültiger Extra-Parameter, als wäre es die komplette Funktion. Und ich bezeichne es nur wegen seines Typs als ungültig, nicht weil du 3 Parameter nicht an fadeOut übergeben kannst.