Question

我只是希望在页面上有一个部分可以交换内容（比如3个不同的项目），并且具有淡入淡出效果。所以我想我可以为内容部分定义我的容器属性，然后我可以定义将要交换的3个div容器中的每一个。因此，考虑到这一点，我编写什么代码来隐藏两个容器，并且一次只显示一个（具有淡入淡出效果）。这个循环将永远重复。

Answer 1

尝试查看jQuery Cycle plugin - 这似乎涵盖了您所要求的大部分内容。

Answer 2

假设您正在使用以下html的JQuery：

<div class="container"><div name="1" /><div name="2" /><div name="somethingelse" /></div>

然后这就可以解决所有问题，除了名为2的div，它会淡入：

$("div.container > div").not('[name="2"]').fadeOut();
$('div.container > div[name="2"]').fadeIn();

你可以很容易地将一个函数带来一个识别div的参数淡入，其他所有函数都会淡出。

Answer 3

如果你想让它永远循环，你可以使用一点dom操作来完成这个技巧。

http://jsfiddle.net/S4UYA/

<div id="container">
    <div class="content">content 1</div>
    <div class="content">content 2</div>
    <div class="content">content 3</div>
</div>

$("#container .content").not(":first").hide();

(function fadeItems(){
    $("#container .content:first").delay(1000).fadeTo(1000,0,function(){
        $(this).insertAfter("#container .content:last");
        $("#container .content:first").fadeTo(1000,1,function(){
            fadeItems();
        });
    });
})();

HTML CSS JQuery淡出/出现内容

3 个答案: