Spin Picture while Moving Down

I'm currently working on a website where I want the arrow images to rotate when a contact form is expanded, and then rotate back when it's collapsed. Here's the code I've been using:

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

In addition, I'd like the #thankyou div to fade out after 5 seconds once the form has been submitted.

Your assistance would be greatly appreciated. Thank you for taking the time to help!

javascriptjqueryhtmlcssanimation

Answer №1

There isn't a commonly used jQuery function called rotateRight(), but you can achieve similar effects by combining CSS3 rotation properties with some jQuery scripting.

If you're interested in learning more about CSS3 animations, check out this example of rotating animation. Simply hover your mouse over the green box to see it in action.

Here's a simple jQuery script that demonstrates how to toggle the visibility of an element and apply a rotation effect:

$(document).ready(function(){
     $("#contactbutton").click(function(){
          if ($("#contact").is(":hidden")){
                 $("#contact").slideDown("slow");
                 $(".arrow").addClass('rotateRight');
          } else {
                 $("#contact").slideUp("slow");
                 $(".arrow").removeClass('rotateRight');
          }
      });
});

And here's the corresponding CSS code for the 'rotateRight' class:

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

    /* Use transition for smooth movement */
    transition: .5s;
    -moz-transition: .5s; /* Firefox 4 */
    -webkit-transition: .5s; /* Safari and Chrome */
    -o-transition: .5s; /* Opera */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve both the key and value from an array of objects

I have been scouring the internet for a solution to this question, but I haven't come across anything that fits my needs. Let's say we have an array of objects like this -- "points":[{"pt":"Point-1","value":"Java, j2ee developer"},{"pt":"Point ...

javascriptarraysjsonmultidimensional-array

Tips for Drawing Lines and Preserving Them When a Condition is Met

I am currently utilizing Node.Js in an attempt to outline objects within an image based on certain conditions being met. My goal is to draw lines around specific portions of the image received from an API response. Whenever the response includes the keywor ...

javascriptnode.jscanvas

Alter information exclusively when the user is actively viewing my webpage

It's funny how Facebook used a similar technique in the past, Imagine you opened facebook.com, scrolled through your feed for a bit and then decided to open a new tab to read some news. Even though there were updates on your Facebook feed while you w ...

javascriptajaxfacebook

What's the best method for securely handling user input containing iframes from a WYSIWYG editor?

I have implemented a feature using the TinyMCE WYSIWYG editor that allows users to input rich text content. Users have the ability to paste links to rich media in the editor, which automatically detects and creates an iframe display. This means that pastin ...

javascriptnode.jsiframetinymce

Can you explain the guidelines for overlapping CSS media queries?

When it comes to spacing out media queries accurately to prevent overlap, how should we approach it? Let's examine the following code as an example: @media (max-width: 20em) { /* styles for narrow viewport */ } @media (min-width: 20em) and (max ...

cssresponsive-designmedia-queries

The console is displaying a state that has not been updated in the Redux reducer yet

I am currently facing a puzzling issue that I can't quite pinpoint whether it's related to Chrome console, Redux, or JavaScript objects. Within my React + Redux application, I have the following function: function InputReducer(state = [{ }], ac ...

javascriptreactjsreduxconsole.log

A guide on implementing array properties in Vue 3

Currently learning the fundamentals, I have an array set up in the parent component (App.vue) data() { return { fruits: [ "apple", "pear", "cherry" ], }; }, I'm aiming to have three instances of the s ...

javascriptvue.js

Executing a software program from an ASP.NET web application

I am currently working on developing a web application that has the ability to read specific log files provided by users and then utilize Microsoft's LogParser 2.2 exe to parse these logs and generate the requested output. My approach involves runnin ...

javascriptasp.netiisactivexlogparser

Limit image dimensions

How can I limit the height and width of an image within the <img> tag to a maximum size of 400x400 px? If the image is smaller than this, it should display at its original size, but if larger, it should be compressed to fit within these dimensions. ...

javascripthtmlimageimage-size

Json node tabbing

[ { "idn" : "liquido", "categoria": "Aromatizante Ambiental Liquido", "productos": [ { "nombre": "Canela" }, { "nombre": "Chanel" }, { "nombre": "Citrus" }, ...

javascriptjqueryjson

Enhancing the performance of your code by optimizing it using jQuery when a checkbox is either checked or

Looking for ways to optimize a jquery function that toggles a URL parameter based on checkbox status. Any suggestions on how to streamline this code? $('#mapControl').live('click', function(){ var thisUrl = $(location).attr(' ...

javascriptjquerycheckbox

Hide all the div elements on the web page and only display one when a button is clicked

I have successfully set up a few buttons that can show and hide divs on click. However, I am wondering if it is possible to hide all other divs when one is showing, and also have "divone" show up on load. Buttons: <button class="btn btn-outline-primar ...

javascriptcsshtml

Is there a way for me to select elements that don't have the class "class" and are an even

I've been utilizing CSS for various tasks, however, there is a particular situation where it doesn't seem to function correctly. My goal is to create a list similar to a spreadsheet, with each line alternating between light grey and slightly dar ...

htmlcsscss-selectors

Library for implementing stylish font effects in JavaScript

I remember stumbling upon a unique JavaScript library that enabled users to write text in different styles and formats. Unfortunately, I am having trouble finding it again. Can anyone suggest any helpful links? Thank you, Murtaza ...

javascriptcss

Using a single jQuery ajax method, you can pass multiple parameters from one form to multiple PHP files simultaneously

Is it possible to send specific values from a single HTML form to one file and other values to another file using just one jQuery AJAX method? ...

phpjqueryajaxformsparameters

Looking for help with cURLing a specific URL

I am attempting to retrieve information from the following link: This link leads to a page that simply displays plain text. Here is the PHP cURL code I am utilizing: function get_web_page( $url ) { $user_agent='Mozilla/5.0 (Windows NT 6.1; rv:8. ...

phphtmlcurl

Transforming CSV CSS values with jQuery's CSS method: Step-by-step guide

My goal is to stack multiple background images within a single div container while ensuring their position is relative to the screen height. The problem I'm encountering is my inability to modify CSS values separated by commas. Here is my logical appr ...

javascriptjquerycsshtml

Issue with Discord.js voice connection destruction函数

I've been attempting to implement a "Stop" command using the @discordjs/voice package, but I'm encountering an error. Despite my efforts to add some error handling, the issue persists. Below is the code snippet: async function stop(message) { t ...

javascriptnode.jsdiscorddiscord.jsvoice

Encountered "Function undefined error when invoking within a map in TypeScript"

In my function, there is a map that looks like this: mainFunc(){ // other logics data.map(function (item) { item.number = Math.round(item.number); item.total = item.last - item.first; item.quantity= item?.quantity ? quantityRange(ite ...

javascripttypescript

React-Troubleshooting list items and keys: A comprehensive guide to resolving common issues

I'm facing a challenge with generating unique key ID's for my list items. Even though I thought I had a good understanding of how unique keys function, it seems that I am mistaken. In the code snippet below, using key={index} or key={item} is no ...

javascriptreactjsmaterial-ui