向下滑动时旋转图像

Rotate Image on Slide Down

本文关键字：旋转 图像      更新时间：2024-02-07

我当前正在尝试旋转此网站上的图像http://theflouringartisans.com/目标是使顶部的箭头图像在展开联系人表单时旋转，并在折叠表单时再次旋转。这是我目前拥有的代码：

        $(document).ready(function(){
            $("#contactbutton").click(function(){
                if ($("#contact").is(":hidden")){
                    $("#contact").slideDown("slow");
                    $(".arrow").rotateRight(180);
                }
                else{
                    $("#contact").slideUp("slow");
                    $(".arrow").rotateRight(180);
                }
            });
        });
        function closeForm(){
            $("#thankyou").show("slow");
            setTimeout('$("#thankyou").hide();$("#contact").slideDown("slow")', 2000);
       }

我还想让div#谢谢你在5秒钟后从提交的表单中淡出。

非常感谢您的帮助，感谢您抽出时间！

我从未听说过jQuery函数调用rotateRight（），但您可以使用css3 rotate和一些jQuery混合来实现这一点。

这里是css3旋转动画的例子，鼠标放在这里的绿色框上。

jQuery:

$(document).ready(function(){
     $("#contactbutton").click(function(){
          if ($("#contact").is(":hidden")){
                 $("#contact").slideDown("slow");
                 $(".arrow").addClass('rotateRight');
          }else{
                 $("#contact").slideUp("slow");
                 $(".arrow").removeClass('rotateRight');
          }
      });
});

css：

.rotateRight {
transform: rotate(180deg);
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Safari and Chrome */
-o-transform: rotate(180deg); /* Opera */
-moz-transform: rotate(180deg); /* Firefox */
/* if you want to do this move with animate use transition */
transition: .5s;
-moz-transition: .5s; /* Firefox 4 */
-webkit-transition: .5s; /* Safari and Chrome */
-o-transition: .5s; /* Opera */
}
相关文章：