Question

我正在创建一个单页网站，作为一种形式的书。单击“向下”div时，我希望当前内容div为fadeOut＆amp;为了显示下一个内容div。我已经有了它......但在某种程度上。另外，我需要使用带有length的if语句来确定用户何时到达最后一个div，以便我可以删除down 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');
        }
    });
});

单击另一个div时，使用类移动到下一个div

1 个答案: