在幻灯片下方旋转图像

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 rotate和一些jQuery混合来做到这一点。

here is css3 rotating animation example, mouse over the green box here.

的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 */ 

}