jQuery not animating opacity but will rotate element on hover

Question

I've been looking for why my code will not set the element to 'opacity:1' on hover but will rotate the element. the html and js is below.

the idea that if an element is unselected (has class rwunselected) then it should perform the function on hover.

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

first check if your browser supports opacity. It is a CSS3 feature. — defau1t, Mar 14 '13 at 10:54
Lot of typos. Don't forget your long time friend, the semicolon `;` — Maen, Mar 14 '13 at 10:55

score 2 · Accepted Answer · answered Mar 14 '13 at 10:58

You are immediately stopping it. You need to stop only one time for both animations.

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

});

Knelis · Answer 2 · 2013-03-14T11:05:21.010

1

That's because you're stopping the first animate by calling the second one:

$(this).stop().animate({opacity:'1'},{duration:300});              
$(this).stop().rotate({animateTo:-90, duration:300});

Use the complete handler:

$(this).stop().animate({opacity:'1'},{duration:300}, function () {
    $(this).rotate({animateTo:-90, duration:300});
});

Now, the second one will fire only once the first is complete.

edited Mar 14 '13 at 11:05

answered Mar 14 '13 at 10:54

Knelis

6,782
2
34
54

this seems to have fixed the opacity animation though it now wont rotate – user2145312 Mar 14 '13 at 10:59

score 0 · Answer 3 · edited May 23 '17 at 12:28

I think the animation effects in jQuery have an asynchronous behaviour, so your code begins the animation for opacity, then immediately stops and starts to rotate.

You should call the rotation at completion of the opacity animation or in a callback.

Anyway, if you want to have both the effects at the same time you should point to a custom solution that involves creating a new effect 'merging' the code of the effects you are interested in. An example can be found here: How can I execute multiple, simultaneous jquery effects?

jQuery not animating opacity but will rotate element on hover

3 Answers3