jQuery没有动画不透明度,但会在悬停时旋转元素
Posted
技术标签:
【中文标题】jQuery没有动画不透明度,但会在悬停时旋转元素【英文标题】:jQuery not animating opacity but will rotate element on hover 【发布时间】:2013-03-02 16:16:35 【问题描述】:我一直在寻找为什么我的代码不会在悬停时将元素设置为 'opacity:1' 但会旋转元素。 html和js如下。
如果一个元素未被选中(有类 rwunselected)那么它应该在悬停时执行该功能。
<table cellpadding="0" cellspacing="10">
<tr>
<td align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/cellists.png" border="0" /></td>
<td align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/elegance.png" border="0" /></td>
<td align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/musicrooms.png" border="0" /></td>
<td align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/absolution.png" border="0" /></td>
</tr>
<tr>
<td align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/helpmankind.png" border="0" /></td>
<td align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/liva.png" border="0" /></td>
<td align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/anthonybrown.png" border="0" /></td>
<td align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/blairjohnstone.png" border="0" /></td>
</tr>
<tr>
<td align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/questiventi.png" border="0" /></td>
<td align="center"><img class="recentworkitem rwunselected" src="images/recentwork/smallimages/surveycentre.png" border="0" /></td>
</tr>
</table>
//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)
);
【问题讨论】:
首先检查您的浏览器是否支持不透明度。这是一项 CSS3 功能。 很多错别字。别忘了你的老朋友,分号;
【参考方案1】:
您将立即停止它。两个动画只需要停止一次。
$('.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);
);
【讨论】:
【参考方案2】:那是因为您通过调用第二个 animate
来停止第一个:
$(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);
);
现在,第二个只会在第一个完成后触发。
【讨论】:
这似乎已经修复了不透明动画,尽管它现在不会旋转【参考方案3】:我认为 jQuery 中的动画效果具有异步行为,因此您的代码开始不透明动画,然后立即停止并开始旋转。
您应该在不透明动画完成时或在回调中调用旋转。
无论如何,如果您想同时拥有这两种效果,您应该指向一个自定义解决方案,该解决方案涉及创建一个新效果“合并”您感兴趣的效果代码。 一个例子可以在这里找到:How can I execute multiple, simultaneous jquery effects?
【讨论】:
以上是关于jQuery没有动画不透明度,但会在悬停时旋转元素的主要内容,如果未能解决你的问题,请参考以下文章