Javascript 使用jquery切换CSS属性并设置其动画

我有以下代码：

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

单击按钮时，它会将DIV的top属性设置为90%

当我再次单击按钮时，我将CSS恢复为原来的（50%）

我该怎么做

我的尝试似乎有效，但似乎很混乱：

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(){
     });
    }
});

你可以用它来做。使用jQuery只需切换一个类

$（“#按钮”）。单击（函数（）{
$（'#divName'）。toggleClass（'animate'）；
});
.container{
位置：相对位置；
高度：80vh；
边框：2倍纯红；
}
#divName{
位置：绝对位置；
最高：50%；
宽度：100%；
高度：50px；
边框：2件纯蓝；
过渡：前1s线性；
}
.制作动画{
排名：90%！重要；
}

按
您可以通过一些小改动来改进这一点：


var state=false；
$（“#按钮”）。单击（函数（）{
百分比=州？50:90
$（'#divName'）。设置动画({
顶部：百分比+“%”，
}，1000，函数（）{}）；
状态=！状态；
});
div{
背景颜色：绿色；
位置：绝对位置；
最高：50%；
}

单击我
你好

这里有一种方法，删除jQuery添加的样式


var div=$（'#divName'）；
$（“#按钮”）。单击（函数（）{
var style=div.attr（“style”）；
if（样式和样式包括（“顶部”））{
div.attr（“style”，style.replace（/top:[^；]+；/，”）；
}否则{
div.css（“顶部”、“90%”）；
}
});
#divName{
宽度：20px；
高度：20px；
边框：黑色实心1px；
位置：绝对位置；
top:50%；/*您需要给top一个init值*/
过渡：前1s线性；
}

点击我
现在你只是把它弄得更乱了。@这是怎么回事？使用正则表达式，获取样式属性是不必要的，更复杂。这在我的回答中是必要的。