logo标签列表

使用jQuery在另一个div中切换div？

jquery
6

我有一个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而不必添加代码来隐藏/显示它们了。
谢谢！
它们是否出现在同一位置？在淡入淡出期间，一个是否在另一个后面可见？ - Diodeus - James MacFarlane
同一位置。一次只能看到一个。 - ItsPronounced
6个回答
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);

演示。

有没有办法让它们淡入淡出？我用fadeOut()和fadeIn()替换了.hide()和.show()，但是在下一行它又开始淡入，就好像前一个div还没有完全淡出就开始淡入了。谢谢！ - ItsPronounced
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]);
});

Fiddle: http://jsfiddle.net/9gwzt/2/

我喜欢这个，但它没有循环。也就是说，当它到达最后一个 div 时，它们全部都被隐藏了。 - ItsPronounced
1
@drpkcen 没有意识到那是期望的行为。马上更新。 - JaredPar
我想就是这样了！让我把它添加到我的网站上并确认一下。谢谢！ - ItsPronounced
完美！最后一个问题，有没有一种简单的方法在鼠标悬停时暂停它，在鼠标移开时恢复？ - ItsPronounced
@drpcken 嗯，不太确定。问题在于当鼠标悬停时取消 fadeOut。我其实不确定如何立即解决这个问题。也许需要另一个问题来解决 :) - JaredPar
1

你可以尝试使用jQueryUI，它有一个选项卡控件：http://jqueryui.com/demos/tabs/

否则，你可以给所有的div添加一个共同的类，比如"tab"。然后对于你的选项卡按钮，你只需要这样做：

$(".tab").fadeOut();
$("#tab-that-I-want").fadeIn();
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);

请查看可工作的示例。

1
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接