使用 jQuery 在切换时旋转图像

Posted 2023-04-12

【中文标题】使用 jQuery 在切换时旋转图像

【英文标题】：Rotate image on toggle with jQuery

【发布时间】：2012-12-09 13:49:05

【问题描述】：

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

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

我一直在阅读有关使用 jQuery 旋转图像的文章，并发现这是我最好的资源：@​​987654322@

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

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

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

【问题讨论】：

用 jQuery 检查进一步旋转动画：***.com/questions/12062818/…

你也应该看看这个标志动画（：bilol.com.tr

【参考方案1】：

检查一下，也许可以帮助某人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');
);

【讨论】：

我建议使用三次贝塞尔过渡来使它更漂亮transition: .3s cubic-bezier(.17,.67,.21,1.69);jsfiddle.net/6tt38q2q/2

【参考方案2】：

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

【讨论】：

我了解如何应用 CSS3 转换，我在我的徽标上使用了一个，我只是在点击时无法附加它是我的问题。我会继续处理这些笔记。

把它放在你的点击函数中应该可以工作：$("#menu-icon").toggleClass("rotate"); 如果它不起作用，你有 jsfiddle 或其他网站我可以看看吗？

只是我在上面发布的网址。由于我正在旅行，我将无法回到它，但会记住您的笔记，感谢您的帮助！

你有我给.toggleClass("rotate"); 的代码，但是我在你的样式表中没有看到rotate 类。尝试添加我在您的样式表的答案中发布的 CSS 部分，看看是否可以解决问题。

正要编辑我的最后一条评论，你可能看到它，因为我正在这样做，但这一切似乎都有效（我添加了一个似乎不起作用的过渡时间当你关闭导航时，有什么线索吗？但这对用户体验并不太有害）。感谢您的帮助！