Javascript 向下滑动时旋转图像

我目前正在尝试在这个网站上旋转一个图像，目标是让顶部的箭头图像在联系人表单展开时旋转，在表单折叠时再次旋转。这是我目前拥有的代码：

        $(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秒后淡出

---

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

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

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

}