在 JQuery 中旋转图像

Question

我使用以下方法在 Jquery 中创建了一个手风琴菜单...

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