Question

嘿伙计们我在滑块上工作，我必须添加一个带有transform属性的类，一旦完全添加类并且动画完成，添加或删除另一个类。现在这是我做的代码，但它没有用。

    $('.backgroundImage').addClass('anim', function(){
 $('.backgroundImage').removeClass('anotherClass');

在这里，我尝试将一个类添加到名为.backgroundImage的{{1}}，并且一旦完全附加，则删除第二个类anim 这个想法是在一个类完全连接时执行此操作，然后只有其他类被删除而不是同时删除。请告诉我我在哪里做错了。感谢。

Answer 1

在transform属性上添加/删除下一个类而不是“addClass”函数。

查看jquery文档中的示例。 http://api.jquery.com/animate/

如果你使用CSS3进行动画制作，那么你可能想阅读这篇文章：

Is there a callback on completion of a CSS3 animation?

Answer 2

好的，如果我理解你的问题，这可能会有所帮助：

<强> Demo Fiddle

所以我得到的是你正在使用CSS动画，并希望在完成之后做一些事情。据我所知，添加/删除类是立即的，一旦绑定到类的CSS动画完成，就没有简单的方法可以告诉它。因此，你只需要在JS中手动编写动画时间代码（除非有人知道更好的方法）。

添加第一个类，然后以等于第一堂课动画持续时间的延迟调用setTimeout()。然后在超时中删除旧类，并添加新类。在这个例子中，我将延迟设置为1秒，但它可以是任何东西。

JS：

var animationDuration = 1000; // 1 second

$('.test').addClass('yourFirstClass');

setTimeout(function() {
    $('.test').removeClass('yourFirstClass').addClass('yourSecondClass');
}, animationDuration);

Answer 3

original doc (see it here)没有说明多个参数。每次 addClass 调用只需一个字符串。例子是：

$( "p" ).addClass( "myClass yourClass" );

$( "p" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

从jQuery 1.4开始，.addClass（）方法的参数可以接收函数。

$( "ul li" ).addClass(function( index ) {
    return "item-" + index;
});

因此，我建议您在代码中使用以下内容：

$('.backgroundImage').addClass('anim');
$('.backgroundImage').removeClass('anotherClass');

这似乎正是你正在做的事情（除了我删除的功能）。

添加一个类，然后在添加类后执行一些操作

3 个答案: