使用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阅读旋转图像,并发现这是我最好的资源:
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屋!