CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ganesh Putta
Ganesh Putta

Reputation: 2681

FadeIn and FadeOut fire in the same time

Here i have two divs with video and text, when i click on next invention second video should show. It works perfectly but its it showing from bottom, i need it to be happen from the same place where first div is hiding

$('#next_invention').click(function() {
  $('#video_1').fadeOut(500);
  $('#video_2').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>

Upvotes: 1

Views: 62

Answers (3)

cнŝdk
cнŝdk

Reputation: 32145

The .fadeOut() method accepts a second argument, a function to execute when the animation is complete:

.fadeOut( [duration ] [, complete ] )

duration (default: 400)

Type: Number or String

A string or number determining how long the animation will run.

complete

Type: Function()

A function to call once the animation is complete, called once per matched element.

So the appropriate way to call the fadeIn() function when the fadeOut() animation is complete, is to use a callback function in the second argument, so it will execute when the animation is complete.

Your code will be:

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

Demo:

$('#next_invention').click(function() {
  $('#video_1').fadeOut(500, function() {
    $('#video_2').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>

Upvotes: 2

enno.void
enno.void

Reputation: 6579

In addition to Abhishek Pandey answer:

You should use the complete Callback and not a delay:

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

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Using delay() can help you. This will show 2nd video after 1st has been hidden.

$('#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>

Upvotes: 1

Related Questions