CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapjquery-animate
Rana Ali
Rana Ali

Reputation: 71

How to animate button movement during Fade Out

In code snippet you can see I have 2 buttons when i click on fade out button my paragraph fade out during this fade out I want my buttons to take place of paragraph slowly animatedly.

$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").fadeOut()
    });
    $(".btn2").click(function(){
        $("p").fadeIn();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p>This is a paragraph.</p>

<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

Upvotes: 0

Views: 99

Answers (3)

user301441
user301441

Reputation: 548

This should be it:

$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").css({ opacity: 0, transition: 'opacity 0.5s' }).slideUp(500);

    });
    $(".btn2").click(function(){
        $("p").css({ opacity: 1, transition: 'opacity 0.5s' }).slideDown(500);

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p>This is a paragraph.</p>

<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

Upvotes: 1

Asif Thebepotra
Asif Thebepotra

Reputation: 330

$(document).ready(function() {
  $(".btn1").click(function() {
    $("p").slideUp(1000);
  });
  $(".btn2").click(function() {
    $("p").slideDown(1000);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p>This is a paragraph.</p>

<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

Upvotes: 2

Ionut Necula
Ionut Necula

Reputation: 11482

You can use slideUp() and slideDown() instead of fadeIn()/fadeOut(). That way you will get a smooth animation:

$(document).ready(function() {
  $(".btn1").click(function() {
    $("p").slideUp()
  });
  $(".btn2").click(function() {
    $("p").slideDown();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p>This is a paragraph.</p>

<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>

Also, I don't think there is need for two buttons for this operation, and in this case you can just use slideToggle():

$(document).ready(function() {
  $(".btn1").click(function() {
    $("p").slideToggle()
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>

Upvotes: 0

Related Questions