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

}