Rotate Image on Slide Down

Question

I'm currently trying to rotate an image on this site http://theflouringartisans.com/ The goal is to have the arrow images at the top rotate when the contact form is expanded and rotate again when the form is collapsed. This is the code I currently have:

        $(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);
       }

I would also like to have the div #thankyou to fade out after 5 seconds from the form being submitted.

Any help is greatly appreciated and I thank you for your time!

Answer 1

I never heard jQuery function called rotateRight(), but you can do this with css3 rotate and some jQuery mix.

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

}