使用 jQuery 在切换时旋转图像 [英] Rotate image on toggle with jQuery

问题描述

相关网站:http://mtthwbsh.com

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

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

我一直在阅读有关使用 jQuery 旋转图像的信息，并发现这是我最好的资源:使用 jQuery 旋转图像 OnClick?

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 如下:

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:

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

推荐答案

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

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

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

这不会提供任何动画.CSS3 过渡甚至可以为您做到这一点，而无需 javascript 来制作动画.看看 this，它有JSFiddle 演示，如果你想试试的话.

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.

编辑

这里有一个演示如何在两个方向上执行 CSS 过渡:

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

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

这篇关于使用 jQuery 在切换时旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！