Question

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

下面的HTML和Jquery

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

＆＃13;

$(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);
  });
});

＆＃13;

<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>

＆＃13;

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不允许你选择具有特定css属性的div，例如隐藏，而不首先选择所有div然后循环，测试每个属性是否具有属性）

Jquery切换简要显示两个div

2 个答案: