我有一组动态生成的 div，每个 div 都包含一个图像、文本和按钮。每个 div 都有一个 timeline-item 类，除了第一个之外，它们最初都是隐藏的。
我想要做的是，当单击下一个按钮时，它将淡出当前时间线项目 div 并平滑地淡入下一个。目前，它淡出第一个并淡入所有具有 timeline-item 类的 div。
$('.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>最佳答案
尝试使用完整的回调来实现顺序淡入淡出:
$('.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>编辑 css 类的改进很小
关于javascript - 根据类淡出 div 并淡入下一个同级 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46567577/