當另一個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'); 
     } 
    }); 
});