旋转图像与jQuery的问题

我试图创建一个可折叠的导航切换时，其中，箭头向上（向下时隐时现）。

我一直在阅读了关于与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>

我在想，如果有人可以帮助解释我怎么可能转换之类的功能，我的插件？

来源

2012-12-22 mtthwbsh

检查一下与jQuery的进一步旋转动画：http://stackoverflow.com/questions/12062818/how-to-combine-jquery-animate-with-css3- properties-without-using-css-transitions –

你应该看看这个标志动画太：（http://bilol.com.tr/ –

这实际上只是添加了一些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/

来源

2012-12-22 01:52:18

我明白如何应用CSS3转换，我使用了一个我的标志，我点击时添加它时遇到问题是我的问题。我将继续使用这些注释工作。 – mtthwbsh

把这个放在你的点击函数中应该可以工作：'$（“＃menu-icon”）。toggleClass（“rotate”）;'如果它不工作，你有一个jsfiddle或其他网站，我可以看一看在吗？ –

只是我上面发布的网址。我旅行时无法回到原位，但会记住您的笔记，感谢您的帮助！ – mtthwbsh

检查这一点，也许可以帮助别人http://jsfiddle.net/gkmagvo3/515/

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

一些css：

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

和Javascript：

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

来源

2014-08-09 18:24:50 Andreybeta

我建议使用立方贝塞尔过渡使其更有趣： 'transition：.3s cubic-bezier（.17，.67，.21,1.69）;' https://jsfiddle.net/6tt38q2q/2/ – Yuri

看起来很酷。谢谢。 – Andreybeta

旋转图像与jQuery的问题

回答

相关问题