jQuery不会设置不透明度动画，但会在悬停时旋转元素
jQuery不会设置不透明度动画，但会在悬停时旋转元素
提问于 2013-03-14 18:51:31
我一直在寻找为什么我的代码不会在悬停时将元素设置为'opacity:1‘，而是旋转元素。html和js如下所示。
如果一个元素未被选中(具有类rwunselected)，那么它应该在悬停时执行该功能。
<table cellpadding="0" cellspacing="10">
<tr>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/cellists.png" border="0" /></td>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/elegance.png" border="0" /></td>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/musicrooms.png" border="0" /></td>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/absolution.png" border="0" /></td>
</tr>
<tr>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/helpmankind.png" border="0" /></td>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/liva.png" border="0" /></td>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/anthonybrown.png" border="0" /></td>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/blairjohnstone.png" border="0" /></td>
</tr>
<tr>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/questiventi.png" border="0" /></td>
<td width="135" align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/surveycentre.png" border="0" /></td>
</tr>
</table>javascript
//set opacities
$('.recentworkitem').css('opacity','.15');
//hover effect on all items with class recentworkitem
$('.recentworkitem').hover(function(){
if($(this).hasClass('rwunselected')){
$(this).stop().animate({opacity:'1'},{duration:300})
$(this).stop().rotate({animateTo:-90, duration:300})
}
},
function(){
if($(this).hasClass('rwunselected')){
$(this).stop().animate({opacity:'.15'},{duration:300})
$(this).stop().rotate({animateTo:0, duration:300})
}
});
//click function
$('.rwunselected').click(function(){
//swap image opacities and classes
$(this).removeClass('rwunselected');
$(this).animate({opacity:'1'},{duration:300});
$('.rwselected').addClass('rwunselected');
$('.rwselected').animate({opacity:'.15'},{duration:300});
$('.rwselected').removeClass('rwselected');
$(this).addClass('rwselected');
//rotate the old selected item back to 0 degrees
$('.rwunselected').rotate({animateTo:0, duration:300})
});回答 3
Stack Overflow用户
回答已采纳
发布于 2013-03-14 18:58:13
你要立即阻止它。对于这两个动画，只需停止一次。
$('.recentworkitem').hover(function(){
if($(this).hasClass('rwunselected')){
$(this).stop().animate({opacity:'1'},{duration:300}).rotate({animateTo:-90, duration:300});
}
},
function(){
if($(this).hasClass('rwunselected')){
$(this).stop().animate({opacity:'.15'},{duration:300}).rotate({animateTo:0, duration:300});
}
});Stack Overflow用户
发布于 2013-03-14 18:54:39
这是因为您通过调用第二个animate来停止第一个one：
$(this).stop().animate({opacity:'1'},{duration:300});
$(this).stop().rotate({animateTo:-90, duration:300});使用complete处理程序：
$(this).stop().animate({opacity:'1'},{duration:300}, function () {
$(this).rotate({animateTo:-90, duration:300});
});现在，第二个只会在第一个完成后触发。
Stack Overflow用户
发布于 2013-03-14 18:55:35
我认为jQuery中的动画效果具有异步行为，因此您的代码开始不透明动画，然后立即停止并开始旋转。
应在不透明度动画完成时或在回调中调用旋转。
无论如何，如果你想同时拥有这两种效果，你应该指出一个自定义的解决方案，它涉及到创建一个新的效果“合并”你感兴趣的效果的代码。可以在这里找到一个示例：How can I execute multiple, simultaneous jquery effects?
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15407174
复制相关文章
相似问题
腾讯云开发者
