上一篇: javascript – 在JQuery中显示隐... 下一篇:javascript – 不能直接将[audio...

javascript – jquery animate()切换而不隐藏元素

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – jquery animate()切换而不隐藏元素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

有没有办法使用animate()函数切换单个CSS属性而不隐藏它？
像这样的东西;

$(".block").animate({ 'border-width': 'toggle' },1000);

我不能使用toggleClass(),addClass()或removeClass().这样做的原因是它对动画元素的大小产生了不必要的影响(参见JS@L_675_2@).

You can find a JSFiddle here.

我能想到的就是这个;

if(parseInt($(".block").css('border-width'))) {
    $(".block").animate({ 'border-width': '0'});
}
else {
    $(".block").animate({ 'border-width': '100px'});
}

..或类似的东西,通过向元素添加一个类.但我宁愿不使用if语句.我想知道这是否可以在一行代码中实现.感觉它应该是.

解决方法

尝试在你的CSS中使用它：

.block1,.block2 {
    display: inline-block;
    vertical-align: top;
    color: white;
    height: 100%;
    width: 50%;
    transition: all,1s;
}
.no-border-top {
    border-top-width: 0;
}

然后只需切换no-border-top类,就可以看到它here