I am quite new to jquery but what i am trying to do is automatically rotate a list item. For instance, i have the following unordered list below.
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
</ul>
At the moment, what i have a is jquery function which rotates the list but only when user clicks on a list item, is it possible to rotate this list using the same code below, but it should be done automatically? That is without the user, clicking on any list
$(function() {
$("li").click(function() {
var prev = $(this).prevAll();
$.unique(prev).each(function(i) {开发者_StackOverflow社区
$(this).delay(i*600).slideUp(function() {
$(this).appendTo(this.parentNode).slideDown();
});
});
});
});
This example keeps rotating without clicking on any element.
function run() {
var prev = $("#rotated li:first-child");
$.unique(prev).each(function(i) {
$(this).delay(i*600).slideUp(function() {
$(this).appendTo(this.parentNode).slideDown();
});
});
}
window.setInterval(run,1000);
Demo: http://jsfiddle.net/mSmbv/
http://jsfiddle.net/8ydLU/1
$(document).ready(function() {
var swapLast = function() {
$("ul li:last").slideUp('slow', function() {
$(this).remove();
$("ul").prepend($(this));
$(this).slideDown('slow', function() {
swapLast();
});
});
}
swapLast();
});
Updated according to the comment from FarligOpptreden
It can be done with a single line of jquery...
var swap = function() {
$("ul li:last").hide().prependTo("ul").fadeIn(2000);
}
window.setInterval(swap,3000)
Here is the fiddle http://jsfiddle.net/q71ub2q7/
精彩评论