关于javascript：使用jQuery动画addClass / removeClass


animating addClass/removeClass with jQuery

我正在使用jQuery和jQuery-ui，并希望为各种对象设置各种属性的动画。

为了在此说明问题，我将其简化为一个div，当用户将鼠标悬停在该div上时，该颜色从蓝色变为红色。

使用animate()时，我可以得到想要的行为，但是这样做时，我要设置动画的样式必须在动画代码中，因此与我的样式表是分开的。 (请参见示例1)

一种替代方法是使用addClass()和removeClass()，但是我无法重新创建使用animate()可以获得的确切行为。 (请参见示例2)

例子1

我们来看一下animate()的代码：

1
2
3
4
5
6
7
$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( {backgroundColor:'red'}, {duration:500});
  });

它显示了我正在寻找的所有行为：

  • 在红色和蓝色之间平滑地动画。
  • 当用户将鼠标快速移入或移出div时，没有动画"超排队"。
  • 如果用户在动画播放过程中将鼠标移出/移入，则可以在当前的"中途"状态和新的"目标"状态之间正确缓解。

    • 但是，由于样式更改是在animate()中定义的，因此我必须在那里更改样式值，而不能仅将其指向我的样式表。定义样式的位置的"碎片化"确实让我感到困扰。

    例子2

    这是我目前使用addClass()和removeClass的最佳尝试(请注意，要使动画正常工作，您需要jQuery-ui)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //assume classes 'red' and 'blue' are defined

    $('#someDiv')
      .addClass('blue')
      .mouseover(function(){
        $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500});
      })
      .mouseout(function(){
        $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500});
      });

    这同时显示了我的原始要求的属性1.和2.，但是3不起作用。

    我了解原因：

    在对addClass()和removeClass()进行动画处理时，jQuery向元素添加临时样式，然后递增适当的值，直到它们达到所提供类的值为止，然后才实际添加/删除该类。

    因此，我必须删除样式属性，否则，如果动画停止一半，样式属性将保留并永久覆盖任何类值，因为标记中的样式属性比类样式具有更高的重要性。

    但是，当动画完成一半时，它还没有添加新类，因此，使用此解决方案，当用户在动画完成之前移动鼠标时，颜色会跳到先前的颜色。

    我理想地想要做的是这样的事情：

    1
    2
    3
    4
    5
    6
    7
    $('#someDiv')
      .mouseover(function(){
        $(this).stop().animate( getClassContent('blue'), {duration:500});
      })
      .mouseout(function(){
        $(this).stop().animate( getClassContent('red'), {duration:500});
      });

    其中getClassContent仅返回所提供类的内容。关键点在于，这样我不必到处都保留样式定义，而可以将它们保留在样式表的类中。

    相关讨论

    由于您不担心IE，为什么不使用CSS过渡来提供动画和jQuery来更改类。实时示例：http：//jsfiddle.net/tw16/JfK6N/

    1
    2
    3
    4
    5
    6
    #someDiv{
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    相关讨论

    另一种解决方案(但需要RichardUI，Richard Neil Ilagan在评论中指出)：-

    addClass，removeClass和toggleClass也接受第二个参数；从一种状态进入另一种状态的持续时间。

    1
    $(this).addClass('abc',1000);

    参见jsfiddle：-http://jsfiddle.net/6hvZT/1/

    相关讨论

    您可以使用jquery ui的switchClass，这里是一个示例：

    1
    $("selector" ).switchClass("oldClass","newClass", 1000,"easeInOutQuad" );

    或参阅此jsfiddle。

    相关讨论

    您只需要jQuery UI效果核心(13KB)，即可启用添加的持续时间(就像它指出的Omar Tariq一样)

    我一直在研究此问题，但希望输入和输出具有不同的转换率。

    这就是我最终要做的事情：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    //css
    .addedClass {
        background: #5eb4fc;
    }

    // js
    function setParentTransition(id, prop, delay, style, callback) {
        $(id).css({'-webkit-transition' : prop + ' ' + delay + ' ' + style});
        $(id).css({'-moz-transition' : prop + ' ' + delay + ' ' + style});
        $(id).css({'-o-transition' : prop + ' ' + delay + ' ' + style});
        $(id).css({'transition' : prop + ' ' + delay + ' ' + style});
        callback();
    }
    setParentTransition(id, 'background', '0s', 'ease', function() {
        $('#elementID').addClass('addedClass');
    });

    setTimeout(function() {
        setParentTransition(id, 'background', '2s', 'ease', function() {
            $('#elementID').removeClass('addedClass');
        });
    });

    这会立即将背景色变为＃5eb4fc，然后在2秒钟内逐渐退回到正常状态。

    这是一个小提琴

    尽管这个问题已经很老了，但我要添加其他答案中没有的信息。

    一旦事件完成，OP将使用stop()停止当前动画。但是，将参数与函数正确混合使用会有所帮助。例如。 stop(true，true)或stop(true，false)，因为这会很好地影响排队的动画。

    以下链接说明了一个演示，该演示显示了stop()可用的不同参数以及它们与finish()的区别。

    http://api.jquery.com/finish/

    尽管OP在使用JqueryUI时没有问题，但这是针对其他用户的，他们可能会遇到类似的情况，但不能使用JqueryUI /也需要支持IE7和8。