如何动画 JQuery addClass/removeClass 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15640820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to animate JQuery addClass/removeClass functions?
提问by CairoCoder
I want to know how to animate JQuery addClass/removeClass functions?
我想知道如何为 JQuery addClass/removeClass 函数设置动画？
for animate function, it seems that I have to put some CSS properties, but what about if I have a class which makes element displayed as block each time I trigger a click function, while all elements are displayed as hidden in CSS. How can I animate this process?
对于动画功能，似乎我必须放置一些 CSS 属性，但是如果我有一个类，每次触发单击功能时都将元素显示为块，而所有元素都显示为隐藏在 CSS 中呢？我怎样才能动画这个过程？
Here's my code:
这是我的代码：
<script src="js/jquery-1.9.1.min.js"></script>
<script>
var allSlides = $('li');
$('#nextSlide').click(function(){
var nextSlide = $('.active').next();
if (nextSlide.length == 0)
{
var nextSlide = allSlides.first();
}
$('.active').removeClass('active');
nextSlide.addClass('active');
return false;
});
$('#prevSlide').click(function(){
var prevSlide = $('.active').prev();
if (prevSlide.length == 0)
{
var prevSlide = allSlides.last();
}
$('.active').removeClass('active');
prevSlide.addClass('active');
return false;
});
</script>
回答by aNewStart847
You can apply the CSS3 transition property to the element being manipulated with jQuery. Here's an example with vendor prefixes:
您可以将 CSS3 过渡属性应用于使用 jQuery 操作的元素。这是一个带有供应商前缀的示例：
element {
-webkit-transition: all 2s; // Chrome
-moz-transition: all 2s; // Mozilla
-o-transition: all 2s; // Opera
transition: all 2s;
}
回答by Derek
If you're using jQueryUI you can use the $.toggleClass(); function.
如果你使用 jQueryUI 你可以使用 $.toggleClass(); 功能。
回答by johnkoht
You can use jQuery .fadeIn()or you can use CSS3 transitions:
你可以使用 jQuery .fadeIn()或者你可以使用 CSS3 过渡：
#nextSlide, #prevSlide {
display: none;
-webkit-transition: display .5s ease;
-moz-transition: display .5s ease;
-o-transition: display .5s ease;
}
.active {
transition: display .5s ease;
-webkit-transition: display .5s ease;
-moz-transition: display .5s ease;
-o-transition: display .5s ease;
}
That should work for you. You can add any other transitions to by replacing displayin the transition style.
那应该对你有用。您可以通过替换display过渡样式来添加任何其他过渡。
回答by Ibnul Hasan
You can definitely animate to add/remove class with jquery.Please check the format below
你绝对可以用 jquery 动画添加/删除类。请检查下面的格式
.removeClass( className [, duration ] [, easing ] [, complete ] )
Example code below
下面的示例代码
$( "div" ).click(function() {
$( this ).removeClass( "big-blue", 1000, "easeInBack" );
});
NOTE:But you've to add jquery-ui.jsfile to make it work.
注意：但是您必须添加jquery-ui.js文件才能使其工作。
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Hope this will be helpful. Thanks
希望这会有所帮助。谢谢
