Rotate image in JQuery

Question

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

Answer 1

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/