Question

我一直在寻找为什么我的代码在悬停时不会将元素设置为'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})
});

Answer 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});
    }

});

Answer 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}); });处理程序：

{{1}}

现在，第二个只有在第一个完成后才会触发。

Answer 3

我认为jQuery中的动画效果具有异步行为，因此您的代码会开始动画以获得不透明度，然后立即停止并开始旋转。

您应该在完成不透明度动画或回调时调用旋转。

无论如何，如果你想同时拥有这两种效果，你应该指向一个自定义解决方案，它涉及创建一个新的效果'合并'你感兴趣的效果的代码。可以在此处找到一个示例：How can I execute multiple, simultaneous jquery effects?

jQuery没有动画不透明度，但会在悬停时旋转元素

3 个答案: