Elements vanish when SHAKE effect is in use

I've been experimenting with this framework and I'm struggling to get the shaking effect to work properly. Whenever I hover over an element, other divs seem to disappear. I tried using different versions of JQuery and JQuery UI on JSFiddle, and it worked, but when I choose the latest version, everything breaks. Any advice or tips would be greatly appreciated. Thank you!

https://jsfiddle.net/w11qknc4/

$( ".box" ).mouseenter(function() {
$( this ).effect( "shake", { direction: "up", times: 4, distance: 10}, 1000 );
$( this ).finish().effect( "shake", { direction: "up", times: 4, distance: 2}, 1000 );
});
javascriptjqueryhtmlcssjquery-ui

Answer №1

Eliminating this particular line is crucial for resolving the issue:

$( this ).finish().effect( "shake", { direction: "up", times: 4, distance: 2}, 1000 );

Instead, consider using the following code snippet:

$( ".box" ).mouseover(function() {
  $(this).effect( "shake", { direction: "up", times: 4, distance: 2}, 1000 );
});

If you want to ensure one effect finishes before starting another, use the following method:

var start = true,
    delay = 1000;

$(".box").mouseover(function() {
  if (start) {
    start = false;
    $(this).effect("shake", { direction: "up", times: 4, distance: 2}, delay);

    setTimeout(function () {
      start = true;
    }, delay)
  }
});

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

Error message: JQuery IAS Infinite Scrolling + Packery - The IASCallbacks function is not declared

I'm having difficulty integrating Packery with Jquery Infinite AJAX scroll on a Tumblr theme. I keep getting the error "Uncaught ReferenceError: IASCallbacks is not defined" and I can't figure out why. Here's the code I've put together ...

jqueryajaxinfinite-scrollpackeryjquery-ias

Deactivate the underscore and include the fiscal year in AngularJS

I am currently faced with a scenario where the back end is returning the value as follows: 123222_D1.123 However, I need to display the date from the database (12-Jun-2020) as 2020-D1.123 in a drop-down menu. Currently, I am displaying the above value i ...

javascriptangulartypescriptangular8

Calculating the total of an array's values using JavaScript

Receiving information from an API and looking to aggregate the values it contains. Consider the following code snippet: function totalPesos(){ $http.get('/api/valueForTest') .then(function(data){ $scope.resumePesos = data.data.Re ...

javascriptangularjs

Retrieve the tweets from the next Twitter user in the Array using blogger.js

I am working on a project that involves a javascript array of Twitter usernames. Using blogger.js, I successfully load the first username along with their last 5 tweets. Now, I am looking to create HTML buttons or links for "previous" and "next" in order ...

javajavascriptjquery

Is it possible to dynamically alter the text and contrast of your entire website?

In the realm of MVC 4 and Visual Studio 2013: I am pondering over how to dynamically change the text on my website with the simple click of a button. The same goes for adjusting contrast. Are there any plugins or techniques that could facilitate this proc ...

htmlcssfont-size

Leverage the version attribute within package.json within one of its scripts

Is there a way to access the version attribute of my package.json file within one of its scripts? I want to include the version number in the name of the JS bundle, instead of using a hash as an identifier. This is what I currently have: "build-js": "bro ...

javascriptnode.jsnpm

Ensuring that the div remains at the top of the page while scrolling

Although this question has been asked previously, I have searched extensively for something similar to this - Incredible Things You can find what I have at Below is the code snippet: <div id="myElement"> <div id="nav"> <a href= ...

jqueryhtmlcssscrollblogger

Issue with MUI Grid item not functioning properly when using overflowY: "auto"

I am encountering an issue while using MUI with React. I have a <Paper> element wrapping a <Grid> with 3 children elements. The problem arises when I set the overflowY property of the bottom grid item to "auto" - instead of showing the scroll b ...

cssreactjsflexboxgridmaterial-ui

jQuery image resizing for elements

I have successfully adjusted the images in the gallery to display one per row for horizontal orientation and two per row for vertical orientation. Now, I am facing a challenge in making the images scalable so they can resize dynamically with the window. A ...

javascriptjqueryhtmlcssajax

Guide to installing a dynamic favicon on a Next.js application for a specific route

I am trying to set up different favicons for my Next.js app based on the route. Here is where I want to implement this feature, displaying the country's flag as the favicon when a user navigates to that specific page. Below is the code snippet from m ...

javascriptreactjsnext.jsfavicon

The dynamically created array length is indicating as null

Although this question has been asked numerous times, most answers are in plain JavaScript. I have a function that generates an array with product data. This array is then utilized in another function to retrieve new data via JSON. $(function(){ var p ...

jqueryjson

Retrieve the dimensions of an image once rendering is complete, using Angular

I'm currently working on obtaining the rendered size of an image within a component. By utilizing the (load) event, I can capture the size of the image as it appears at that particular moment (pic1), as well as its "final" size after the page has fini ...

javascriptangularimageevents

Strange behavior is observed when using ng-view inside ng-controller, especially when refreshing the

Here is the code I am working with: <body ng-controller="CoreCtrl"> <div ng-cloak> <!-- NavBar --> <div ng-include="'/app/core/navbar.html'"></div> <!-- Main content --> <div class="con ...

javascripthtmlangularjs

Error encountered in Angular after consolidating JavaScript files into a single file: [$injector:modulerr]

After developing an Angular application, everything seemed to be functioning well when I included the controllers.js, routes.js, directives.js files separately in index.html. However, upon attempting to combine these files into a single js file using gul ...

javascriptangularjsgulp-concat

Using JavaScript and HTML, showcase the capital city of a country along with its corresponding continent

As a newcomer to this platform, I am excited to share a code snippet that I have created using HTML and JavaScript. The code generates a textbox in an HTML page where users can type the name of a country. Upon inputting the country's name, the code dy ...

javascripthtml

Switching the image origin of an <img> tag fails when using a variable

Today I attempted to change the image source dynamically on my webpage using the id attribute within an image tag (id="bla" src="....."). Typically, I achieve this by selecting the element and updating the src property like so: $("#bla").prop("src", "/new ...

jquery

The AJAX function failed to trigger another JavaScript function after successfully completing its task

Trying to figure out how to execute a function after successful AJAX post request. The function I want to call is: function col() { var $container = $(".post-users-body"); $container.imagesLoaded(function() { $container.masonr ...

javascriptjqueryajax

Optimizing the particle rendering speed for HTML5 <canvas> elements

Currently conducting an experiment to enhance the maximum particle count before frame-rates begin to decrease in HTML5 Canvas. Utilizing requestAnimationFrame and employing drawImage from a canvas as it appears to be the most efficient method for image re ...

javascripthtmlhtml5-canvasspritewebgl

Sending a form using Ajax and jQuery

I have created a login form using ajax (jQuery), but I'm facing an issue where the user's email address is not remembered after submission. This means that every time the user logs in, they have to re-enter their full email address instead of it ...

jqueryajaxforms

Determine the number of rows in an Excel spreadsheet using JavaScript

Currently, I am working on a codeigniter project where I need to upload an Excel file. However, before uploading the file, I want to display the number of records it contains. To achieve this, I decided to create a function within my script and then call t ...

javascriptphpexcelcodeigniter