Question

我有一个简单的淡入淡出过渡，隐藏当前div，同时取消隐藏它下方的div。然而，过渡看起来不正确，因为当淡入淡出发生时，它会简要地显示所有div。我是使用jQuery的新手，所以有人可以告诉我如何在淡入淡出过渡时让它看起来更好吗？

p.s我知道jQuery可以编码得更好，但我再次对jQuery很新，所以如果有人有更好的编码方式，请告诉我。

感谢。

HTML：

<div id="home" class="content" align="center"style="width:400px;height:350px;background-color:grey;">
    <h2>Home</h2>
    <p>DIV 1 CONTENT GOES HERE</p>
     <button id="buttonone" type="button">Click Me!</button> 
    <!-- ... -->
</div>
<!-- /Home -->

<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:350px; background-color:grey;">
    <div class="content">
        <h2>Portfolio</h2>
        <p> DIV 2 CONTENT GOES HERE </p>
        <button id="buttontwo" type="button">Click Me!</button>
        <!-- ... -->
    </div>
</div>
<!-- /Portfolio -->

<!-- About -->
<div id="about" class="panel" style="width:400px;height:350px;background-color:grey;">
    <div class="content">
        <h2>About</h2>
        <p>DIV 3 CONTENT GOES HERE</p>
        <button id="buttonthree" type="button">Click Me!</button>
        <!-- ... -->
    </div>
</div>
<!-- /About -->

<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:350px;background-color:grey;">
    <div class="content">
        <h2>Contact</h2>
        <p> DIV 4 CONTENT GOES HERE </p>
        <button id="buttonfour" type="button">Click Me!</button>
        <!-- ... -->
    </div>
</div>
<!-- /Contact -->

jQuery的：

$(document).ready(function(){
$("#buttonone").click(function(){
$("#home").fadeOut();
});
});

$(document).ready(function(){
$("#buttontwo").click(function(){
$("#portfolio").fadeOut();
});
});

$(document).ready(function(){
$("#buttonthree").click(function(){
$("#aboutfour").fadeOut();
});
});

$(document).ready(function(){
$("#buttonthree").click(function(){
$("#about").fadeOut();
});
});


$(function() {
    $('#portfolio').addClass('hidden').hide();
    $('#buttonone').click(function() {
        if ($('#portfolio').hasClass('hidden')) {
            $('#portfolio').removeClass('hidden').fadeIn(1000);
        }

        });
});

$(function() {
    $('#about').addClass('hidden').hide();
    $('#buttontwo').click(function() {
        if ($('#about').hasClass('hidden')) {
            $('#about').removeClass('hidden').fadeIn(1000);
        }

        });
});

$(function() {
    $('#contact').addClass('hidden').hide();
    $('#buttonthree').click(function() {
        if ($('#contact').hasClass('hidden')) {
            $('#contact').removeClass('hidden').fadeIn(1000);
        }

        });
});

Answer 1

如何添加每个按钮class="button"属性，并运行以下jQuery：

$('.button').click(function() {
        if($(this).hasClass("hidden"))
        {
            //if already hidden, do you want to display it back?
            $(this).removeClass("hidden");
        }
        else{
            $(this).parent().parent().next().fadeIn(1000);
            $(this).addClass("hidden");
            $(this).parent().parent().fadeOut(1000);//this will hide the button as well, is this okay?
        }
    }
});

因此，当单击一个按钮时，将隐藏包含该按钮的div，并显示下一个div，是吗？那么，在开始时，只会显示第一个？我不清楚这个功能。

更新

我终于开始工作了。你去：https://jsfiddle.net/ev64mqsp/

请注意，我为Home div添加了一个额外的div，以使所有主要内容div具有相同的结构。

$('.button').click(function() {
    if($(this).next().hasClass("hidenext"))
    {            
        $(this).parent().parent().fadeOut(1000)
        $(this).parent().parent().next().removeClass("hidenext");
    }
    else{
        $(this).parent().parent().fadeOut(1000);
        $(this).parent().parent().next().addClass("hidenext");
    }
});

HTML：

<div id="home" class="content" align="center"style="width:400px;height:350px;background-color:grey;">
   <div>
      <h2>Home</h2>
      <p>DIV 1 CONTENT GOES HERE</p>
      <button class="button" id="buttonone" type="button">Click Me!</button> 
    </div>
</div>
<!-- /Home -->

<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:350px; background-color:grey;">
    <div class="content">
       <h2>Portfolio</h2>
       <p> DIV 2 CONTENT GOES HERE </p>
       <button class="button" id="buttontwo" type="button">Click Me!    
       </button>

    </div>
</div>

<!-- /Portfolio -->

<!-- About -->
<div id="about" class="panel" style="width:400px;height:350px;background- color:grey;">
    <div class="content">
       <h2>About</h2>
       <p>DIV 3 CONTENT GOES HERE</p>
       <button class="button" id="buttonthree" type="button">Click Me!</button>     
    </div>
</div>
<!-- /About -->

<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:350px;background-color:grey;">
    <div class="content">
       <h2>Contact</h2>
       <p> DIV 4 CONTENT GOES HERE </p>
       <button class="button" id="buttonfour" type="button">Click Me!</button>
<!-- ... -->
    </div>
</div>
<!-- /Contact -->

Answer 2

当display:none完成一个好的动画时，应该添加隐藏的类（应该有fadeOut()）。如果您想保留div位置，可以使用visibility:hidden删除display:none提供的fadeOut()

＆＃13;

$(document).ready(function(){
  $("body > div").not("#home").addClass("hidden");
    $("button[type=button]").click(function(){
        if ($(this).parent().attr('id') == 'home') { 
            $(this).parent().fadeOut(1000,function(){
                $(this).addClass('hidden');
                $(this).next().fadeIn(1000,function(){$(this).removeClass('hidden')});
            });
        } else {
            $(this).parent().parent().fadeOut(1000,function(){
                $(this).addClass('hidden');
                if ($(this).next().hasClass('panel')) {
                  $(this).next().fadeIn(1000,function(){$(this).removeClass('hidden')});
                }
            });
        }
        
    });
});

＆＃13;

.hidden { display: none }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home" class="content" align="center"style="width:400px;height:200px;background-color:grey;">
    <h2>Home</h2>
    <p>DIV 1 CONTENT GOES HERE</p>
     <button id="buttonone" type="button">Click Me!</button> 
    <!-- ... -->
</div>
<!-- /Home -->

<!-- Portfolio -->
<div id="portfolio" class="panel" style="width:400px;height:200px; background-color:grey;">
    <div class="content">
        <h2>Portfolio</h2>
        <p> DIV 2 CONTENT GOES HERE </p>
        <button id="buttontwo" type="button">Click Me!</button>
        <!-- ... -->
    </div>
</div>
<!-- /Portfolio -->

<!-- About -->
<div id="about" class="panel" style="width:400px;height:200px;background-color:grey;">
    <div class="content">
        <h2>About</h2>
        <p>DIV 3 CONTENT GOES HERE</p>
        <button id="buttonthree" type="button">Click Me!</button>
        <!-- ... -->
    </div>
</div>
<!-- /About -->

<!-- Contact -->
<div id="contact" class="panel" style="width:400px;height:200px;background-color:grey;">
    <div class="content">
        <h2>Contact</h2>
        <p> DIV 4 CONTENT GOES HERE </p>
        <button id="buttonfour" type="button">Click Me!</button>
        <!-- ... -->
    </div>
</div>
<!-- /Contact -->

＆＃13;

Jquery Fade过渡看起来不正确

2 个答案: