2

我尝试制作一个图像fadeIn效果，我设置jQuery animate方法来实现淡入效果，我发现我在CSS中注册的悬停事件已被取消。

我觉得很奇怪，这个方法应该不会影响我的悬停效果。

虽然我可以通过 javascript 重新注册悬停事件，但它正在执行其他任务

我有什么误解吗？

PS 我试图不使用 CSS3 动画。

JS部分： 

$('img').animate({
    'opacity': '0.5'
}, 1500);

CSS部分： 

img {
   opacity: 0;

}
img:hover {
   opacity: 1;
}

http://jsfiddle.net/aSRMR/

4

2 回答 2

2

在css中使用!important将解决问题

img:hover {
opacity: 1 !important;
}

工作小提琴

于 2013-09-02T06:08:06.987 回答
1

您可以改用悬停。

$('img').hover( function (){
    console.log('hovered in');
}, function (){
    console.log('hovered out');
}

不要忘记在制作动画之前放置stop() 。

所以尝试你的代码看起来像这样。

$('img').hover( function (){
    console.log('hovered in');
    $('img').stop().animate({'opacity': '1'}, 1500);
}, function (){
    console.log('hovered out');

    $('img').stop().animate({'opacity': '0.5'}, 1500);
}

另一种解决方案，如果您想做 CSS 方法，请这样做。

$('img').hover( function (){
    $('img').addClass('hovered');
}, function (){
    $('img').removeClass('hovered');
}

在你的 CSS 上。

img {
   opacity: 0;
}
.hovered {
   opacity: 1;
}

您是否也考虑过使用 CSS Webkit 进行褪色？

于 2013-09-02T06:07:49.813 回答