CODEWITHSUNDEEP
jqueryhoverjquery-animate
user2145312
user2145312

Reputation: 928

jQuery not animating opacity but will rotate element on hover

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

Upvotes: 1

Views: 693

Answers (3)

Knelis
Knelis

Reputation: 7129

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.

Upvotes: 1

Waqar Alamgir
Waqar Alamgir

Reputation: 9968

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

});

Upvotes: 2

DocKuro
DocKuro

Reputation: 444

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?

Upvotes: 0

Related Questions