jQuery不動畫不透明但會旋轉元素懸停

我一直在尋找爲什麼我的代碼不會在懸停時將元素設置爲「不透明：1」，但會旋轉元素。下面是html和js。jQuery不動畫不透明但會旋轉元素懸停

這樣的想法，如果一個元素是未選中的（具有類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}) 
});

來源

2013-03-14 user2145312

首先檢查您的瀏覽器是否支持不透明度。這是一個CSS3功能。 – defau1t 2013-03-14 10:54:21

很多錯別字。不要忘記你的好友，分號';' – Bigood 2013-03-14 10:55:20

你正在立即停止它。您只需要停止一次動畫。

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

});

來源

2013-03-14 10:58:13

非常感謝這個固定它！ – user2145312 2013-03-14 11:00:26

歡迎您，如果您已完成，請標記正確:) – 2013-03-14 11:01:48

會做...不會讓我再等3分鐘... – user2145312 2013-03-14 11:03:23

那是因爲你是通過調用第二個停止第一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}); 
});

現在，第二個只會在第一個完成後纔會觸發。

來源

2013-03-14 10:54:38 Knelis

這似乎已經修復了不透明動畫，雖然它現在不會旋轉 – user2145312 2013-03-14 10:59:13

我認爲jQuery中的動畫效果具有異步行爲，因此您的代碼將爲不透明的動畫開始，然後立即停止並開始旋轉。

您應該在不透明度動畫完成時或在回調中調用旋轉。

無論如何，如果你想在同一時間同時擁有兩個效果，你應該指向一個自定義的解決方案，它涉及到創建一個新效果'合併'你感興趣的效果代碼。可以找到一個例子這裏：How can I execute multiple, simultaneous jquery effects?

來源

2013-03-14 10:55:35 DocKuro

jQuery不動畫不透明但會旋轉元素懸停

回答

相關問題