¿Alterne entre divs dentro de otro div usando jQuery?

Question

Así que tengo un div que puede tener varios divs dentro de él. Algo así como:

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

Lo que estoy tratando de hacer es al cargar la página, la primera div es visible, a continuación, después de tantos segundos, se desvanece y el segundo div desvanece en Bastante simple con fadeIn y fadeOut. pero tengo que especificar las acciones de cada div. ¿Hay alguna manera de decir 'Alternar entre cada div dentro de mi #news div'? De esta forma, puedo agregar nuevos divs sin tener que agregar código para ocultarlos/mostrarlos.

Gracias!

Answer 1

intente lo siguiente

$(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]); 
}); 

violín: http://jsfiddle.net/9gwzt/2/

Answer 2

Usted podría tratar de usar jQueryUI, que tiene un control de ficha: http://jqueryui.com/demos/tabs/

de lo contrario podría dar todos los divs una clase común, por ejemplo "ficha". A continuación, para sus botones de ficha sólo puede tener:

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

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

Answer 4

También puede que desee ver en el uso de la jQuery Cycle plugin:

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

Answer 5

Probablemente necesita algún complemento con rotación de contenido.

He aquí una de ellas: http://demo.smartnetzone.com/auto-rotating-tabs-using-jquery/

Answer 6

Este bucle a través de los artículos de noticias. Cuando llegue al final, comenzará de nuevo en la parte superior. Cambie el 2000 al intervalo que desee (en ms).

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); 

See working example.