根据课程淡出div并淡入下一个兄弟div

时间：2017-10-04 14:34:18

标签： javascript jquery

我有一组动态生成的div，每个div包含一个图像，文本和按钮。每个div都有一个timeline-item类，它们最初都隐藏在第一个之外。

我想要做的是当点击下一个按钮时，它将淡出当前时间轴项目div并顺利淡入下一个按钮。目前它淡出了第一个并且在所有div中以timeline-item类消失。

＆＃13;
＆＃13; 
$('.timeline-next').click(function(){
    $(".timeline-item").fadeOut().next(".timeline-item").fadeIn();
});
＆＃13; 
.hidden {
    display: none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您单击事件正在应用淡出并淡入所有具有timeline-item类的节点，您需要更改事件处理程序以仅将所讨论的行为应用于所单击按钮的父级。你可以这样做：

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

答案 1 :(得分：0)

尝试使用完整的回调以获得连续淡入淡出：

.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>
@Url.Action("KeepSessionAlive", "Auxiliary")

修改 css课程的改进很少

相关问题
最新问题