基于类淡出 div 并淡入下一个兄弟 div答案

【问题标题】：Fade out div and fade in next sibling div based on class基于类淡出 div 并淡入下一个兄弟 div
【发布时间】：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

标签： javascript jquery

【解决方案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();
});

【讨论】：