用jQuery动画addClass / removeClass

2020/10/12 11:41 · javascript ·  · 0评论

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

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

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

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


例子1

让我们看一下我拥有的代码animate()

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( {backgroundColor:'red'}, {duration:500});
  });

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

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

但是由于定义了样式更改,因此animate()我必须在此处更改样式值,而不能仅将其指向我的样式表。定义样式的位置的“碎片化”确实让我感到困扰。


例子2

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

//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将临时样式添加到元素,然后递增适当的值,直到它们达到所提供类的值为止,然后才实际添加/删除该类。

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

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


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

$('#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/

#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也接受第二个参数;从一种状态进入另一种状态的持续时间。

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

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

您可以使用jui ui的switchClass,这里是一个示例:

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

或参阅此jsfiddle

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

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

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

//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。

本文地址:http://javascript.askforanswer.com/yongjquerydonghuaaddclass-removeclass.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!