淡出div并根据类别淡入下一个兄弟div

Question

I have a dynamically generated set of divs, each one contains an image, text and button. Each div has a class of timeline-item and they are all hidden initially apart from the first one.

What I want to do is when the next button is clicked, it will fade out the current timeline-item div and fade in the next one smoothly. Currently it fades out the first one and fades in all the div's with a class of timeline-item .

 $('.timeline-next').click(function(){ $(".timeline-item").fadeOut().next(".timeline-item").fadeIn(); }); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="timeline"> <div class="timeline-menu"> <h2>Since 1861</h2> <div id="timeline-body" class="container"> <div class="timeline-item visible"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> A RICH RACING HERITAGE</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut magna purus, efficitur in dui vel, euismod mollis lacus. Aliquam ac erat non ligula ultricies commodo aliquet nec eros. Donec efficitur, purus eget volutpat porta, nulla metus rhoncus odio, sit amet cursus libero lectus vitae est. Curabitur cursus velit vitae purus finibus sodales. Ut tincidunt vestibulum suscipit. Nunc auctor turpis in faucibus pulvinar. Nunc non tincidunt magna. Praesent vitae commodo nibh. Nulla a nisl eget ligula pharetra dignissim. </p> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item hidden"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1862</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item hidden"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1863</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item hidden"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1864</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item hidden"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1865</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item hidden"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item hidden"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item hidden"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item hidden"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item hidden"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item hidden"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item hidden"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item hidden"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item hidden"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item hidden"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <p>tdasdsdsdasd</p> <p>asdasdasdas</p> <p>asdaasd</p> <button class="timeline-next">NEXT</button> </div> </div> </div> </div> </div> 

Answer 1

You click event is applying the fadeout and fade in to all the nodes with a timeline-item class, you need to change the event handler to only apply the behavior in question to the parent of the clicked button. You can achieve this by doing :

$('.timeline-next').click(function() {
    $(this).closest(".timeline-item").fadeOut().next(".timeline-item").removeClass('hidden').fadeIn();
});

Answer 2

try using the complete callback in order to have a sequential fade:

 $('.timeline-next').click(function() { var $this = $(this).closest(".timeline-item"); $this.fadeOut(400, function(){ $this.next(".timeline-item").fadeIn(400); }); }); 

 .timeline-item { display: none; } .timeline-item.visible { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="timeline"> <div class="timeline-menu"> <h2>Since 1861</h2> <div id="timeline-body" class="container"> <div class="timeline-item visible"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> A RICH RACING HERITAGE</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut magna purus, efficitur in dui vel, euismod mollis lacus. Aliquam ac erat non ligula ultricies commodo aliquet nec eros. Donec efficitur, purus eget volutpat porta, nulla metus rhoncus odio, sit amet cursus libero lectus vitae est. Curabitur cursus velit vitae purus finibus sodales. Ut tincidunt vestibulum suscipit. Nunc auctor turpis in faucibus pulvinar. Nunc non tincidunt magna. Praesent vitae commodo nibh. Nulla a nisl eget ligula pharetra dignissim. </p> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1862</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1863</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1864</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1865</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <button class="timeline-next">NEXT</button> </div> </div> <div class="timeline-item"> <div class="timeline-image"> <img src="http://musselburgh.dev/mediaLibrary/images/english/1015.jpg" /> </div> <div class="timeline-text"> <h3> Since 1861</h3> <p>tdasdsdsdasd</p> <p>asdasdasdas</p> <p>asdaasd</p> <button class="timeline-next">NEXT</button> </div> </div> </div> </div> </div> 

Edit little improvement with css classes