使用jquery切换CSS属性并对其进行动画处理

Question

I have the below code:

$('#button').click(function () { 
    $('#divName').animate({
        top: 90%,
    }, 1000, function(){
    });  
});

When the button is clicked, it sets the top property for the DIV to 90%.

When I click the button again, I went to revert the CSS back to its original (50%).

How can I do this?

My attempt which seems to work but seems messy:

var state = false;

$('#button').click(function () { 
    if (state) {
        state = false;
        $('#divName').animate({
        top: '50%',
        }, 1000, function(){
      });
    } else if (state == false){
        state = false;
        $('#divName').animate({
        top: '90%',
       }, 1000, function(){
     });
    }
});

Answer 1

You could do it with CSS transitions . With jQuery just toggle a class.

 $('#button').click(function () { $('#divName').toggleClass('animate'); }); 

 .container { position: relative; height: 80vh; border: 2px solid red; } #divName { position: absolute; top: 50%; width: 100%; height: 50px; border: 2px solid blue; transition: top 1s linear; } .animate { top: 90% !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="button">Press</button> <div class="container"> <div id="divName"></div> </div> 

Answer 2

You could improve this with some minor changes:

 var state = false; $('#button').click(function() { percent = state ? 50 : 90 $('#divName').animate({ top: percent + '%', }, 1000, function() {}); state = !state; }); 

 div { background-color: green; position: absolute; top: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p id="button">clickme</p> <div id="divName"> <p>hello</p> </div> 

Answer 3

here is one way to do it by removing the style added by jQuery

 var div = $('#divName'); $('#button').click(function () { var style = div.attr("style"); if(style && style.includes("top")){ div.attr("style", style.replace(/top:[^;]+;/,"")); }else{ div.css("top", "90%"); } }); 

 #divName{ width: 20px; height: 20px; border: black solid 1px; position: absolute; top:50%; /*you need to give an init value to top*/ transition: top 1s linear; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <button id="button">click me</button> <div id="divName"></div>