FadeIn和FadeOut同时开火

时间：2017-05-24 07:50:58

标签： javascript jquery html css

这里我有两个视频和文字的div，当我点击下一个发明第二个视频应该显示。它工作得很完美，但它从底部显示，我需要它从第一个div隐藏的同一个地方发生

＆＃13;
＆＃13; 
$('#next_invention').click(function() {
  $('#video_1').fadeOut(500);
  $('#video_2').fadeIn(500);
});
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row" style="text-align:center;margin-bottom:0px;">
    <div id="video_1">
      <div class="col-xs-6  col-md-offset-0 col-center-block placeholder" style="margin-bottom:15px;">
        <div style="text-align:center;">
          <div class="col-md-12 normal_desc_grey_ans embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" width="640" height="540" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/fPgCbkDcUao?autoplay=1&rel=0&wmode=transparent&enablejsapi=1"></iframe>
          </div>
        </div>
      </div>
      <div class="col-xs-6  col-md-offset-0 col-center-block placeholder" style="margin-bottom:0px;">
        <div style="text-align:left;">
          <p class="bbd-sub-min-head"><b>Arjun rai hated the malai on the milk</b></p>
          <p class="bbd-sub-min-text">So he created a vibrating coaster<br/>That comes underneath the glass</p>
          <div style="text-align:center;margin:40px 0;">
            <div class="normal_desc_grey_ans" style="text-align:left;">
              <p class="large text-muted" style="margin-top:15px;text-align:left;"><button id="next_invention" class="bbd-btn">Next Invention</button></p><br/>
              <p class="large text-muted" style="margin-top:15px;text-align:left;"><button class="bbd-btn">I want my child to experience this</button></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="video_2" style="display:none;">
      <div class="col-xs-6 col-md-offset-0 col-center-block placeholder" style="margin-bottom:15px;">
        <div style="text-align:center;">
          <div class="col-md-12 normal_desc_grey_ans embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" width="640" height="540" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/pcrWVrUhdLU?autoplay=1&rel=0&wmode=transparent&enablejsapi=1"></iframe>
          </div>
        </div>
      </div>
      <div class="col-xs-6  col-md-offset-0 col-center-block placeholder" style="margin-bottom:0px;">
        <div style="text-align:left;">
          <p class="bbd-sub-min-head"><b>Arjun rai hated the malai on the milk</b></p>
          <p class="bbd-sub-min-text">So he created a vibrating coaster<br/>That comes underneath the glass</p>
          <div style="text-align:center;margin:40px 0;">
            <div class="normal_desc_grey_ans" style="text-align:left;">
              <p class="large text-muted" style="margin-top:15px;text-align:left;"><button id="next_invention" class="bbd-btn">Next Invention</button></p><br/>
              <p class="large text-muted" style="margin-top:15px;text-align:left;"><button class="bbd-btn">I want my child to experience this</button></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

.fadeOut()方法接受第二个参数，即动画完成时要执行的函数：

  

.fadeOut( [duration ] [, complete ] )

     

持续时间（默认值：400）

     

类型：数字或字符串

     

确定动画运行时间的字符串或数字。

     

完成

     

类型：功能（）

     

动画完成后调用的函数，每次调用一次   匹配元素。

因此，在fadeIn()动画完成时调用fadeOut()函数的适当方法是在第二个参数中使用回调函数，因此它将在动画完成时执行。

您的代码将是：

$('#next_invention').click(function() {
  $('#video_1').fadeOut(500, function() {
    $('#video_2').fadeIn(500);
  });
});

<强>演示：

＆＃13;
＆＃13; 
$('#next_invention').click(function() {
  $('#video_1').fadeOut(500, function() {
    $('#video_2').fadeIn(500);
  });
});
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row" style="text-align:center;margin-bottom:0px;">
    <div id="video_1">
      <div class="col-xs-6  col-md-offset-0 col-center-block placeholder" style="margin-bottom:15px;">
        <div style="text-align:center;">
          <div class="col-md-12 normal_desc_grey_ans embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" width="640" height="540" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/fPgCbkDcUao?autoplay=1&rel=0&wmode=transparent&enablejsapi=1"></iframe>
          </div>
        </div>
      </div>
      <div class="col-xs-6  col-md-offset-0 col-center-block placeholder" style="margin-bottom:0px;">
        <div style="text-align:left;">
          <p class="bbd-sub-min-head"><b>Arjun rai hated the malai on the milk</b></p>
          <p class="bbd-sub-min-text">So he created a vibrating coaster<br/>That comes underneath the glass</p>
          <div style="text-align:center;margin:40px 0;">
            <div class="normal_desc_grey_ans" style="text-align:left;">
              <p class="large text-muted" style="margin-top:15px;text-align:left;"><button id="next_invention" class="bbd-btn">Next Invention</button></p><br/>
              <p class="large text-muted" style="margin-top:15px;text-align:left;"><button class="bbd-btn">I want my child to experience this</button></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="video_2" style="display:none;">
      <div class="col-xs-6 col-md-offset-0 col-center-block placeholder" style="margin-bottom:15px;">
        <div style="text-align:center;">
          <div class="col-md-12 normal_desc_grey_ans embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" width="640" height="540" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/pcrWVrUhdLU?autoplay=1&rel=0&wmode=transparent&enablejsapi=1"></iframe>
          </div>
        </div>
      </div>
      <div class="col-xs-6  col-md-offset-0 col-center-block placeholder" style="margin-bottom:0px;">
        <div style="text-align:left;">
          <p class="bbd-sub-min-head"><b>Arjun rai hated the malai on the milk</b></p>
          <p class="bbd-sub-min-text">So he created a vibrating coaster<br/>That comes underneath the glass</p>
          <div style="text-align:center;margin:40px 0;">
            <div class="normal_desc_grey_ans" style="text-align:left;">
              <p class="large text-muted" style="margin-top:15px;text-align:left;"><button id="next_invention" class="bbd-btn">Next Invention</button></p><br/>
              <p class="large text-muted" style="margin-top:15px;text-align:left;"><button class="bbd-btn">I want my child to experience this</button></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

使用delay()可以帮助您。这将在隐藏第一个视频后显示第二个视频。

$('#video_2').delay(500).fadeIn(500);


$('#next_invention').click(function() {
  $('#video_1').fadeOut(500);
  $('#video_2').delay(500).fadeIn(500);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row" style="text-align:center;margin-bottom:0px;">
    <div id="video_1">
      <div class="col-xs-6  col-md-offset-0 col-center-block placeholder" style="margin-bottom:15px;">
        <div style="text-align:center;">
          <div class="col-md-12 normal_desc_grey_ans embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" width="640" height="540" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/fPgCbkDcUao?autoplay=1&rel=0&wmode=transparent&enablejsapi=1"></iframe>
          </div>
        </div>
      </div>
      <div class="col-xs-6  col-md-offset-0 col-center-block placeholder" style="margin-bottom:0px;">
        <div style="text-align:left;">
          <p class="bbd-sub-min-head"><b>Arjun rai hated the malai on the milk</b></p>
          <p class="bbd-sub-min-text">So he created a vibrating coaster<br/>That comes underneath the glass</p>
          <div style="text-align:center;margin:40px 0;">
            <div class="normal_desc_grey_ans" style="text-align:left;">
              <p class="large text-muted" style="margin-top:15px;text-align:left;"><button id="next_invention" class="bbd-btn">Next Invention</button></p><br/>
              <p class="large text-muted" style="margin-top:15px;text-align:left;"><button class="bbd-btn">I want my child to experience this</button></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="video_2" style="display:none;">
      <div class="col-xs-6 col-md-offset-0 col-center-block placeholder" style="margin-bottom:15px;">
        <div style="text-align:center;">
          <div class="col-md-12 normal_desc_grey_ans embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" width="640" height="540" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/pcrWVrUhdLU?autoplay=1&rel=0&wmode=transparent&enablejsapi=1"></iframe>
          </div>
        </div>
      </div>
      <div class="col-xs-6  col-md-offset-0 col-center-block placeholder" style="margin-bottom:0px;">
        <div style="text-align:left;">
          <p class="bbd-sub-min-head"><b>Arjun rai hated the malai on the milk</b></p>
          <p class="bbd-sub-min-text">So he created a vibrating coaster<br/>That comes underneath the glass</p>
          <div style="text-align:center;margin:40px 0;">
            <div class="normal_desc_grey_ans" style="text-align:left;">
              <p class="large text-muted" style="margin-top:15px;text-align:left;"><button id="next_invention" class="bbd-btn">Next Invention</button></p><br/>
              <p class="large text-muted" style="margin-top:15px;text-align:left;"><button class="bbd-btn">I want my child to experience this</button></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：1)

除了Abhishek Pandey回答：

你应该使用完整的Callback而不是延迟：

$('#next_invention').click(function() {
  $('#video_1').fadeOut(500,function(){
     $('#video_2').fadeIn(500);
  });
});
相关问题
最新问题