当另一个div被点击时移动到下一个div的类

Question

我创建一个单页网站，充当书的一种形式。当“下”div被点击时，我想让当前内容div fadeOut &为下一个内容div显示。我有它的工作..但在一定程度上。另外，我需要使用带有长度的if语句来确定用户何时到达最后一个div，以便我可以删除下划线。

现在，它的运行方式并不完全如我所愿。此外，我想我下一步需要使用，长度等。这里就是我与

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(); 
} 
}); 

继承人codepen的一个简单的例子这让事情变得更清晰了！谢谢！

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'); 
     } 
    }); 
});