Jquery 切换短暂显示两个 div

Question

我有一个工作开关，显示 div 然后隐藏它，然后在单击按钮时显示第二个 div。我的问题是，一旦单击按钮，它们都会瞬间显示，我想看看是否可以避免这种情况。

HTML 和 Jquery 下面

这里的工作示例：http://jordanaharrison.com/Testing/Portfoliosite/

$(document).ready(function() {

  var $div1 = $('#work'),
    $div2 = $('#play'),
    currentDiv = '',
    $button = $('button');

  $div2.hide();
  $button.text('' + currentDiv);

  $(document).on('click', 'button', function(evt) {
    $div1.toggle('fade', 'fast');
    $div2.toggle('fade', 'fast');

    currentDiv = (currentDiv === '') ? '' : '';
    $button.text('' + currentDiv);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="DualContain">
  <div class="SlideContain lightgreybg">
    <div id="work">
      <div id="desc">
        <div class="SectionHeader redbg">
          recent work
        </div>

        <div class="Headline red">
          Marketing Central
        </div>

        <div class="Subhead">
          Website Redesign
        </div>

        <div class="BodyCopy">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit consectetur ex, ac commodo justo ultricies at. Nam iaculis egestas urna, sit amet tristique turpis.
        </div>
        <img height="20px" src="images/arrowred.png" width="20px">

        <div class="Clickthrough red">
          &nbsp;View More
        </div>
      </div>

      <div id="image">
        <img src="images/Site2_04.png" width="100%">
      </div>
    </div>

    <div id="play">
      <div id="desc">
        <div class="SectionHeader greenbg" style="width:71px;">
          recent play
        </div>

        <div class="Headline green">
          First Dress Project
        </div>

        <div class="Subhead">
          Website Redesign
        </div>

        <div class="BodyCopy">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit consectetur ex, ac commodo justo ultricies at. Nam iaculis egestas urna, sit amet tristique turpis.
        </div>
        <img height="20px" src="images/arrowgreen.png" width="20px">

        <div class="Clickthrough green">
          &nbsp;View More
        </div>
      </div>

      <div id="image">
        <img src="images/Site2_04.png" width="100%">
      </div>
    </div>
  </div>
  <button class="slidebtn">
    <img src="images/flip.png">
  </button>
</div>

Answer 1

去掉 $div2.hide(); 并在 css 中隐藏其中一个，这样 html 会自动隐藏一个，然后开始切换周期。

Answer 2

您似乎需要让第一个 div 的切换函数使用对第二个 div 的切换函数的回调。

$(selector).fadeToggle(speed,callback);

所以您的代码可能看起来像这样（编辑到您的文档）

var first = $("#work");
var prev = $("#play");
var temp;
$("#button").click(function() {
    $(first).fadeToggle('slow', function() {
        $(prev).fadeToggle('slow');
    });
    temp = first;
    first = prev;
    prev = temp;
});

（您可以使用其他更快的方法每次都首先获得正确的 div，但是 JQuery 不允许您 select div具有特定的 css 属性，例如隐藏，无需先 select 遍历所有 div 然后循环，测试每个属性是否具有该属性）

Jquery 切换短暂显示两个 div

Jquery toggle shows both divs briefly

javascript

jquery

html

toggle