1

我在使用 switchClass 方法时遇到了一些问题。newsHover当鼠标悬停在newsArea带有一些过渡的类时，我想添加/删除一个 css 类（ ）。

我有以下代码

$('.newsArea').mouseover(function(){
        $(this).switchClass('','newsHover',500, 'linear');
 }).mouseleave(function(){
        $(this).switchClass('newsHover','',500);
});

我认为这些方法是正确的，如您所见： http ://docs.jquery.com/UI/Effects/ClassTransitions和 http://jqueryui.com/docs/switchClass/

newsHover 类有一个背景图像：

.newsHover{        
        background-image: url("../../images/newsArea-hover.png"); 
        background-repeat: no-repeat; 
        background-position:left top;
        width: 200px; height: 52px;            
      }

图像出现但没有任何过渡。它在 500 毫秒后出现。

我可以接受任何带有 css3 跨浏览器的解决方案。

这里有什么提示吗？？

谢谢

编辑

我忘了告诉我我使用的是 1.7.2 jquery 版本；jquery.easing.1.3 和 jquery-ui-1.8.23.custom.min（选择了所有组件）

4

2 回答 2

1

仅供参考，您描述的行为完全符合预期。该switchClass 函数只是更改在“过渡”结束时无法动画化的属性。switchClass不支持动画背景图像。

并非所有样式都可以设置动画。例如，没有办法为背景图像设置动画。任何无法动画的样式都将在动画结束时更改。

来自 [http://api.jqueryui.com/switchClass/][1]

于 2012-10-16T13:22:42.107 回答
-1

有一个初始类可以切换 -

$('.newsArea').mouseover(function(){
        $(this).switchClass('oldClass','newsHover', 500);
 }).mouseleave(function(){
        $(this).switchClass('newsHover','oldClass',500);
});

也许图像在应用后需要时间来加载？

所以你可以试试..

.oldClass{
  background-image: url("../../images/newsArea-hover.png"); 
  background-size:0px;
}
.newsHover{        
   background-size: auto;     
}
于 2012-08-31T17:28:50.850 回答