使用 jQuery 在切换时旋转图像

Rotate image on toggle with jQuery

提问by mtthwbsh

Site in question: http://mtthwbsh.com

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

I'm attempting to create a collapsable nav where when toggled, the arrow points up (and down when hidden).

我正在尝试创建一个可折叠的导航，当切换时，箭头指向上方（隐藏时指向下方）。

I've been reading up on rotating images with jQuery, and have found this to be my best resource: Rotate Image(s) OnClick With jQuery?

我一直在阅读有关使用 jQuery 旋转图像的内容，并发现这是我最好的资源：使用 jQuery 旋转图像 OnClick？

I understand what's happening here, but am having a tough time visualizing it with my markup. My jQuery for my collapsing nav is as follows:

我明白这里发生了什么，但是我很难用我的标记将它可视化。我用于折叠导航的 jQuery 如下：

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

I was wondering if anyone could help explain how I might translate that sort of functionality to my plugin?

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

回答by Andreybeta

Check this, maybe can help somebody http://jsfiddle.net/gkmagvo3/515/

检查这个，也许可以帮助某人http://jsfiddle.net/gkmagvo3/515/

<a class="arrow" href="#">        
    <img class="arrow-img rotate-reset" src="img.png" />        
</a>

Some css:

一些CSS：

.rotate {
    transform: rotate(-180deg);
    /*transform: rotate(180deg);*/
    transition: .3s;
}
.rotate-reset {
    transform: rotate(0deg);
    transition: .3s;
}

And javascript:

和 javascript：

$('.arrow').on("click", function (event) {
    $('.arrow-img').toggleClass('rotate');
    $('.arrow-img').toggleClass('rotate-reset');
});

回答by Jason Whitted

It's really just added some CSS to an element. You could create a class in your stylesheet:

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

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

And then just use toggle class to add/remove it.

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

This will not provide any animation. CSS3 transitions can even do that for you without requiring javascript to animate. Take a look at this, which has an JSFiddle demo if you want to try it.

这不会提供任何动画。CSS3 过渡甚至可以为您做到这一点，而无需 javascript 进行动画处理。看看这个，如果你想尝试它，它有一个 JSFiddle 演示。

Edit

编辑

Here's a demo on how to perform a CSS transition in both directions:

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

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

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