Reputation: 165
I have created an accordian menu in Jquery using the following...
<script type="text/javascript">
$(document).ready(
function()
{
$('#menu_list .menu_head').click(
function(e)
{
e.preventDefault();
$(this).closest('li').find('.menu_content').not(':animated').slideToggle();
}
)
}
);
</script>
However, I would like to add another event handler to the 'click' function so that an imaged nested inside the .menu_head class rotates 90 degrees on click (so moves from pointing right to pointing down when the menu expands).
I have tried adding the following line:
$(this).find('img').rotate({animateTo:90});
but still, no joy.
Can anyone please help?
Thanks
Upvotes: 2
Views: 210
Reputation: 15558
You should be able to do this using CSS transitions. Here's an example:
.menu_head img{
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
Then use:
$(this).find('img').css('transform', 'rotate(90deg)');
The CSS code tells the browser to animate the 'transform' property when it's changed and that the transition time should be 0.5s.
Here it is working: http://jsfiddle.net/pTQ5g/1/
Update: To get it working with toggleClass()
just create a class like this:
.menu_head img.rotate90{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
Then use:
$(this).find('img').toggleClass('rotate90');
Here's a demo: http://jsfiddle.net/pTQ5g/3/
Upvotes: 1