首页 > 编程语言> 文章详细

javascript – 使用jQuery动画addClass / removeClass

2019-09-15 21:33:02 阅读：229 来源： 互联网

标签：javascript jquery css jquery-ui jquery-animate

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

为了解释这里的问题,我把它简化为一个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});
  });

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

>在红色和蓝色之间平滑动画.
>当用户快速将鼠标移入和移出div时,没有动画’过度加载’.
>如果用户在动画播放时将鼠标移出/移入,则在当前“中途”状态和新“目标”状态之间正确缓解.

但是由于样式更改是在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会为元素添加一个临时样式,然后递增适当的值,直到它们达到提供的类的值,然后才会实际添加/删除该类.

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

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

我理想的是能够做到这样的事情：

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

标签：javascript,jquery,css,jquery-ui,jquery-animate
来源： https://codeday.me/bug/20190915/1806111.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 使用jQuery动画addClass / removeClass