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>

但是，我想在'click'函数中添加另一个事件处理程序，以便嵌套在.menu_head类中的imaged在点击时旋转90度（因此当菜单扩展时，从右指向下移动指向下方）。 / p>

我尝试添加以下行：

$(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代码告诉浏览器在“变换”属性发生变化时为其设置动画，并且过渡时间应为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/

在JQuery中旋转图像

1 个答案: