Question

我的方法switchClass有些问题。当鼠标悬停在类newsHover上并进行一些转换时，我想添加/删除一个css类（newsArea）。

我有以下代码

$('.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（选中所有组件）

Answer 1

仅为了您的信息，您描述的行为完全符合预期。 switchClass函数只是更改在“转换”结束时无法动画的属性。 switchClass不支持动画背景图片。

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

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

Answer 2

使用 -

进行初始课程切换

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

jquery switchClass transition - background-image

2 个答案: