javascript - 向下滑动时旋转图像

Question

我目前正在尝试在此站点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 #thankyou 在提交表单 5 秒后淡出。

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

Answer 1

我从未听说过名为 rotateRight() 的 jQuery 函数，但您可以使用css3 旋转和一些 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 */

}