How to move an element to the extreme right and then hide it?

Question

when I click on a button the heading element should be moved to the extreme right of the page with it's opacity being decreased slowly and once the element is moved to the extreme right then it should be hidden.

I have used jquery animation function to do this.

Below is the code that I have written so far :

  $(document).ready(function(){ $('.myButton').click(function(){ $('.myHeading').animate( { marginLeft : '90%', opacity : 0, }, 1500 ); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <h1 class="myHeading">Hello, world!</h1> <button class="btn btn-warning col-xs-3 myButton">Click here to animate the heading</button> 

My problem is the element is getting moved to the right with its opacity decreased . Only the opacity is getting decreased. How do I hide the element completely after the element is moved to the right?

Thanks in advance :)

Answer 1

You have callback on animation completion for this purpose. Also, give your element a fixed width so it will disappear smoothly and 'world' will not come to the second line

 $(document).ready(function(){ $('.myButton').click(function(){ $('.myHeading').animate( { marginLeft : '80%', opacity : 0, }, 1500, hideElement ); }) function hideElement(){ $('.myHeading').hide() } }) 

 h1{ width: 200px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <h1 class="myHeading">Hello, world!</h1> <button class="btn btn-warning col-xs-3 myButton">Click here to animate the heading</button>