Question

这是我第一次发帖。我经常使用这个网站，发现它在我的学习中非常有用。我是JS / jQuery的新手。

这是我的代码http://codepen.io/Dawdre/pen/pjZxZj

HTML：

<div id="page1" class="col-8">
     <h2 class="row-headers">Music</h2>
    <p class="row-txt">Text here.
        <br>
        <br>Text here
        <br>
        <br>Text here</p>
    <br>
     <h2 class="row-headers">Songs</h2>
    <p class="row-txt">Text here</p>
    <br>
</div>
<div id="page2" class="col-8">
     <h2 class="row-headers">Drama</h2>
    <p class="row-txt">Text here
        <br>
        <br>Text here
        <br>
        <br>Text here</p>
    <br>
     <h2 class="row-headers">Contact</h2>
    <p class="row-txt">Text here</p>
</div>

jQuery的：

$(document).ready(function () {
    $("#banner").hide(0).delay(0).fadeIn(2000);


    $('#pagetop').click(function () {
        $('html, body').animate({
            scrollTop: 0
        }, 600);
    });

    $('.menu-btn').click(function () {
        $('html, body').animate({
            scrollTop: $('.row').offset().top
        }, 1000);
    });

});

$(document).ready(function () {
    $('#next-btn').click(function () {
        $('#page1').fadeOut(1000, function () {
            $('#page2').delay(0).fadeIn(2500);
        });
    });

});

'page2'的css是

#page2 {
    display: none;
}

我只想淡出div元素'page1'并淡入div'page2'。我希望能够通过单击“menu-btn”或“next-btn”无缝地从内容转换为内容。同时留在同一页面上。即使我的知识有限，这似乎是一件相当容易的事情，但到目前为止，我被证明是错误的！

有更好的方法吗？我用hide（）和animate（）进行了采样。将不透明度设置为0和fadeIn，但page1甚至没有消失。 page2似乎反应良好，但page1不是我尝试过的任何类型的jQuery。

它有点工作......不是真的。动画中似乎有一个中断，page1的上半部分并没有完全消失。然后第2页的淡入淡出重叠page1。然后page1立即消失。

基本上它远非光滑。它似乎在某种程度上被打破了。无论是html，css还是JS相关，谷歌搜索和搜索的时间都没有给我答案。

我觉得这对我的代码来说比实际如何jQuery更具问题。虽然我肯定知道在我还在学习的时候也会有更好的方法。感谢。

Answer 1

我创建了一个非常基本的演示，演示如何使用CSS和jQuery进行淡入淡出切换。我喜欢这种方法，因为你可以在没有jQuery的情况下用CSS完成很多工作。

HTML：

<button class="btn">Fade Toggle</button>
<img class="img1" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/326221/dummy.jpg">
<img class="img2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/326221/animals-q-c-640-480-3.jpg">

CSS：

.img1, .img2{
   position: absolute;
   transition: all 2s ease-in-out;
}

.hide{
   opacity: 0;
}

transition: all 2s ease-in-out;这一行CSS是淡入淡出效果的神奇之处。

JS：

$('.btn').on("click", function(){
   $('.img2').toggleClass('hide'); 
});

基本上我们只是使用一个小jQuery来切换元素类。

CODEPEN DEMO

Answer 2

您可以在页面中添加一个类，然后点击该按钮进行切换:(详细说明显而易见）

$('#next-btn').click(function () {
    var notshown = $('.fadepages').filter(":hidden");
    var shown = $('.fadepages').not(":hidden");
    shown.fadeOut(1000, function () {
        notshown.fadeIn(2500);
    });
});

所以当你再次点击它时，它会淡化到OTHER。如果你有一个很大的数字，并希望按顺序淡化它们，你可以找到当前的一个，然后得到＆＃34; next＆＃34;除非它是最后一个，然后是第一个节目......例如：

$('#next-btn').click(function () {
    var pgs = $('.fadepages');
    var shown = pgs.not(":hidden");
    var si = pgs.index(shown);
    $('#shownpage').text(si + ":" + pgs.length);
    shown.fadeOut(1000, function () {
        var fadeindex = si < pgs.length - 1 ? si + 1 : 0;
        pgs.eq(fadeindex).fadeIn(2500);
    });
});
$('.fadepages').not(":first").hide();

最后一页的示例页面：http://jsfiddle.net/MarkSchultheiss/t9L2wnsL/

简单的fadeOut /比我认为应该更复杂？

2 个答案: