0

現在、このサイトで画像を回転させようとしています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);
       }

また、フォームが送信されてから 5 秒後に div #thankyou がフェードアウトするようにしたいと思います。

どんな助けでも大歓迎です、そして私はあなたの時間をありがとう!

4

1 に答える 1

2

私は、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 */

}
于 2012-07-24T12:47:26.053 に答える