jquery - 在 JQuery 中旋转图像

Question

我使用以下命令在 Jquery 中创建了一个 Accordion 菜单...

<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>

但是，我想向“单击”函数添加另一个事件处理程序，以便嵌套在 .menu_head 类中的图像在单击时旋转 90 度(因此当菜单展开时从指向右移动到指向下)。

我尝试添加以下行:

$(this).find('img').rotate({animateTo:90});

但仍然没有喜悦。

有人可以帮忙吗？

谢谢

Answer 1

您应该能够使用 CSS 过渡来做到这一点。这是一个例子:

.menu_head img{
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    transition: transform 0.5s;
}

然后使用:

$(this).find('img').css('transform', 'rotate(90deg)');

CSS 代码告诉浏览器在“transform”属性发生更改时为其设置动画，并且转换时间应为 0.5 秒。

这里正在工作:http://jsfiddle.net/pTQ5g/1/

更新:要使其与toggleClass()一起工作，只需创建一个如下所示的类:

.menu_head img.rotate90{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}

然后使用:

$(this).find('img').toggleClass('rotate90');

这是一个演示:http://jsfiddle.net/pTQ5g/3/