Hovering over an element can trigger a dynamic swing animation effect

Question

Hovering over an element can trigger a dynamic swing animation effect

My objective is to animate an item to swing only when hovered over, utilizing CSS and jQuery, and of course, it should stop swinging when the mouse moves away.

After browsing the web, I came across a code snippet that swings an element when the document is loaded (view complete jsFiddle).

$(document).ready(function() {

    function swing(){
        $('.swing').toggleClass('right');
        setTimeout(swing, 1000);
    }
    swing();
});

I attempted to use the .hover() method, but unfortunately, it did not work as expected. What steps can help me resolve this minor issue?

jquery css animation

Answer 1

Answer №1

Here's an example of a similar code snippet:

$(document).ready(function() {
    var timer;
    
    function rotate(){
        $('.rotate').toggleClass('right');
        timer = setTimeout(rotate, 1000);
    }
    
    $(".rotate").hover(function() {
        rotate();
    },
    function() {
        clearTimeout(timer);
    });
});

Answer 2

Here's an example of a similar code snippet:

$(document).ready(function() {
    var timer;
    
    function rotate(){
        $('.rotate').toggleClass('right');
        timer = setTimeout(rotate, 1000);
    }
    
    $(".rotate").hover(function() {
        rotate();
    },
    function() {
        clearTimeout(timer);
    });
});

Hovering over an element can trigger a dynamic swing animation effect

Answer №1

Similar questions

The art of arranging elements on a webpage using HTML and

When viewing my website on a mobile device, all elements that are supposed to be hidden on the desktop version are displayed properly. However, when I resize the

What is the best way to implement a new search input for my datatable while also enabling the searchHighlight feature?

Issue with Jquery code on Mac OS Chrome - it's functional on Windows 10 Chrome though!

Determine the total count of files in queue with Uploadify prior to initiating the upload process

Is it possible for CSS hover to have an impact on multiple divs that share the same class name

Move the internal array pointer forward to the next record in order to apply the insertAfter function within the jquery code

Tips for resizing images to fit within a TD cell in an HTML table

Can Glychicons be utilized in form submission buttons?

What is the best way to toggle the visibility of a div using script with Bootstrap 4's latest display classes?

Concealing the Load More Data Button in ASP.net MVC using Ajax and Javascript

Can a Highchart display a basic line chart with multiple values plotted against the x-axis?

The Bootstrap Navbar fails to function properly when viewed on mobile devices

Guidance on Implementing a Delay and FadeIn Effect for AJAX Responses from JSON Iterator

Maintaining advanced multiple search criteria in jqgrid after grid reload - how can it be achieved?

swapping images using jquery

Enhance user interactivity on your website by incorporating jQuery and CSS for

The link-dark bootstrap class fails to have an impact

"Enhance your images with dynamic captions using jQuery

Update the class of the appropriate navigation tab when the corresponding div is scrolled into view