基于类淡出 div 并淡入下一个兄弟 div
Posted
技术标签:
【中文标题】基于类淡出 div 并淡入下一个兄弟 div【英文标题】：Fade out div and fade in next sibling div based on class 【发布时间】：2017-10-04 14:34:18 【问题描述】：我有一组动态生成的 div，每个都包含一个图像、文本和按钮。每个 div 都有一个 timeline-item 类，除了第一个之外，它们最初都是隐藏的。
我想要做的是当单击下一个按钮时，它将淡出当前的时间线项目div并平滑地淡入下一个。目前它淡出第一个并淡入所有 div 的类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>【问题讨论】：
这有点像您要找的东西吗？您必须将其与 fadeOut 方法结合使用。 jsfiddle.net/kmtCV/2 【参考方案1】：尝试使用完整的回调来进行顺序淡入：
$('.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 类几乎没有改进
【讨论】：
【参考方案2】：您单击事件正在应用淡出和淡入到具有timeline-item 类的所有节点，您需要更改事件处理程序以仅将有问题的行为应用于单击按钮的父级。你可以这样做：
$('.timeline-next').click(function()
$(this).closest(".timeline-item").fadeOut().next(".timeline-item").removeClass('hidden').fadeIn();
);
【讨论】：
以上是关于基于类淡出 div 并淡入下一个兄弟 div的主要内容，如果未能解决你的问题，请参考以下文章