使用jQuery在另一个div内的div之间切换?

时间:2011-09-22 16:09:52

标签: jquery

所以我有一个div,里面可以有几个div。类似的东西:

<div id="news">         
    <span>Latest News!</span>       
    <div>
        //News 1    
    </div>
    <div>
        //News 2
    </div>
</div>

我正在尝试做的是在页面加载时,第一个div是可见的,然后在这么多秒之后,它淡出,第二个div淡入。非常简单的fadeIn和fadeOut但我必须指定每个div的动作。有没有办法说'在我的#news div'中的每个div之间切换?这样我可以添加新的div而无需添加代码来隐藏/显示它们吗?

谢谢!

6 个答案:

答案 0 :(得分:3)

// count the number of news items
var len = $("#news div").length;

// hide all but the first
$("#news div:gt(0)").hide();

// set up a counter
var counter = 0;

// function to hide all except the current iteration
function changeDiv() {
    $("#news div").eq(counter).show().siblings("div").hide();
    counter++;

    // when we reach the last one, start again
    if(counter === len) {
        counter = 0;   
    }
}

// go!
var i = setInterval(changeDiv, 2000);

Demo.

答案 1 :(得分:2)

尝试以下

$(document).ready(function() {
    $('#news div:gt(0)').hide();

    var swap = function(item) {
        setTimeout(function() {
            $(item).fadeOut(1000, function() {
                var next = $(item).next()[0];
                if (!next) {
                    next = $('#news div')[0];
                }

                $(next).fadeIn(1000, function() {
                    swap($(this)[0]);
                })
                    });
        }, 1000);

    };

    swap($('#news div')[0]);
});

小提琴:http://jsfiddle.net/9gwzt/2/

答案 2 :(得分:1)

你可以尝试使用jQueryUI,它有一个标签控件:http://jqueryui.com/demos/tabs/

否则你可以给所有的div一个普通的类,比如说“tab”。然后,您可以使用标签按钮:

$(".tab").fadeOut();
$("#tab-that-I-want").fadeIn();

答案 3 :(得分:1)

您可能还想研究使用jQuery Cycle插件:

http://jquery.malsup.com/cycle/

答案 4 :(得分:1)

可能你需要一些内容轮换的插件。

以下是其中一个:http://demo.smartnetzone.com/auto-rotating-tabs-using-jquery/

答案 5 :(得分:1)

这将循环播放新闻。当它到达终点时,它将从顶部开始。将2000更改为您想要的任何间隔(以毫秒为单位)。

function switchNewsItem(){
    $('#news div:visible').fadeOut(function(){
        $(this).next().length ? $(this).next().fadeIn() : $('#news div').eq(0).fadeIn();
    });
};
$('#news div').eq(0).show(); // show the first news item
setInterval(switchNewsItem, 2000);

见工作example