使用jQuery在切换时旋转图像

有问题的网站： http://mtthwbsh.com

我正在尝试创建一个可折叠的导航,当切换时,箭头指向上方(隐藏时向下).

我一直在阅读使用jQuery旋转图像,并发现这是我最好的资源：Rotate Image(s) OnClick With jQuery?

我理解这里发生了什么,但我很难用我的标记来形象化它.我的折叠导航的jQuery如下：

<script type="text/javascript">
$(document).ready(function(){
/* toggle nav */
$("#menu-icon").on("click",function(){
    $(".nav").slidetoggle();
    $(this).toggleClass("active");
  });
 });
</script>

我想知道是否有人可以帮助解释我如何将这种功能转换为我的插件？

解决方法

它实际上只是为元素添加了一些CSS.您可以在样式表中创建一个类：

.rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

然后只需使用切换类添加/删除它.

这不会提供任何动画. CSS3过渡甚至可以为您做到这一点,而无需javascript动画.看看this,如果你想试试它,它有一个JSfiddle演示.

编辑

这是一个关于如何在两个方向上执行CSS转换的演示：

http://jsfiddle.net/jwhitted/NKTcL/