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

所以我有一个div可以有几个div在里面。喜欢的东西：使用jQuery在另一个div内的div之间切换？

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

我试图做的是网页加载时，第一个div是可见的，那么这么多秒后，就淡出和第二个div淡入与淡入淡出，并很简单。但我必须指定每个div的行为。有没有办法说'在我的#news div内的每个div之间切换？这样我可以添加新的div，而无需添加代码来隐藏/显示它们？

谢谢！

来源

2011-09-22 drpcken

它们是否出现在相同的位置？在淡入淡出后，其中一个可以看到吗？ –

同一位置。一次只能看到一个。 – drpcken

请尝试以下

$(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/

来源

2011-09-22 16:22:29 JaredPar

我喜欢这个，但它不会循环。意思是当它到达最后一个div时，它们全部被隐藏起来。 – drpcken

@drpkcen没有意识到这是所需的行为。将更新在短短的一秒 – JaredPar

@drpcken好吧，更新了自行车行为 – JaredPar

你可以尝试使用jQueryUI的，其中有一个标签控件：http://jqueryui.com/demos/tabs/

否则，你可以给所有的div一个通用类，说“标签”。然后你的标签按钮你可以有：

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

来源

2011-09-22 16:13:38 robbrit

// 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.

来源

2011-09-22 16:13:42 karim79

有什么方法可以淡入淡出这些内容吗？我用fadeOut（）和fadeIn（）替换了.hide（）和.show（），但它在下一行中淡入，就像它在前面的div淡出之前开始淡入一样。谢谢！ – drpcken

您可能还需要考虑使用jQuery周期插件：

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

来源

2011-09-22 16:16:30 fehays

也许你需要一些内容旋转的插件。

这里就是其中之一：http://demo.smartnetzone.com/auto-rotating-tabs-using-jquery/

来源

2011-09-22 16:17:34 Samich

通过新闻项目这将循环。当它到达最后时，它会回到顶端。将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。

来源

2011-09-22 16:37:40 ampersand

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

回答

相关问题