javascript - 单击另一个 div 时移动到具有类的下一个 div

Question

我正在创建一个单页网站，充当一本书的形式。当单击“向下”div 时，我希望当前内容 div 淡出并显示下一个内容 div。我已经让它工作了..但在一定程度上。另外，我需要使用带有长度的 if 语句来确定用户何时到达最后一个 div，以便我可以删除向下的 div。

现在，它也没有完全按照我想要的方式工作。另外，我认为我需要使用 next、length 等。这是我正在使用的内容的快速示例

HTML

<div class="content>
   <h1> page one </h1>
</div>
<div class="content hidden-content>
   <h1> page two </h1>
<div>
<div class="content hidden-content>
   <h1> last page </h1>
</div>
<div class="hover-wrap>
   <div class="down"></div>
</div>

jQuery

$(".hover-wrap").hover(function(){
if (!$(".down").hasClass('animated')) {
    $(".down").dequeue().stop().animate({ bottom: "0px" }, 500);
}
}, function() {
    $(".down").addClass('animated').animate({ bottom: "-75px" }, 500, "linear", function() {
    $(".down").removeClass('animated').dequeue();
    });
});

var btnNode             = $(".down"),
    btnWrap         = $(".hover-wrap"),
    contentNode     = $(".content"),
    nextContentNode = contentNode.next(".content"),
    endNode             = $(".credit"),
    fadeInSpeed     = 500;


btnNode.on("click", function(){

contentNode.hide();

if (nextContentNode.length){
    nextContentNode.fadeIn(fadeInSpeed);

} else  {
    contentNode.hide();
    endNode.fadeIn();
    btnWrap.fadeOut();
} 
});

这是一个代码笔，可以让事情变得更清晰!谢谢!

http://codepen.io/Mctowlie/pen/qxdyE

Answer 1

这是你想要的吗:http://codepen.io/OxyDesign/pen/rykLI ？

JS

$(document).ready(function(){
    var btnNode = $(".down"),
        btnWrap = $(".hover-wrap"),
        pages = $('[data-page]'),
        pagesLgth = pages.length,
        fadeInSpeed = 500;

    btnWrap.hover(function() {
        if (!btnNode.hasClass('animated')) {
            btnNode.dequeue().stop().animate({
                bottom: "0px"
            }, 500);
        }
    }, function() {
        btnNode.addClass('animated').animate({
            bottom: "-75px"
        }, 500, "linear", function() {
            btnNode.removeClass('animated').dequeue();
        });
    });


    btnNode.on("click", function(e) {
        e.preventDefault();
        var currentPage = pages.filter('.active');
        currentPage.hide().removeClass('active');
        if(currentPage.data('page') < pagesLgth){
            currentPage.next('[data-page]').fadeIn(fadeInSpeed).addClass('active');
        }else{
            $('[data-page="1"]').fadeIn(fadeInSpeed).addClass('active');
        }
    });
});