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

JavaScript allows for the creation of animated or timed text

Here is the code snippet I am currently working with: function list() { return "blob1<br>blob2<br>blob3"; } When I run this code, it simply displays all the text in return at once when the function is called. I am wondering if there is a ...

javascriptreturn

Tips for retrieving the distance from the top of a specific div element and transferring it to another div

How can I add margin-top based on the tab that is clicked? Specifically, when TAB 4 is selected, I want the content to remain in the same position from the top. ...

javascriptjquerycss

Guide on utilizing Nextjs middleware for directing users to sub-domain according to their IP address

I've been struggling to effectively implement NextJs's middleware for redirecting users from a specific country to another web domain. I've encountered some issues with my setup: Main domain: https://www.example.com sub-domain: src/middle ...

javascriptnext.jsmiddleware

Utilizing Javascript Regular Expressions to extract specified parameters from URLs with specific patterns

I am facing a specific issue with pure vanilla javascript. My task is to extract the values of A, B & C from various URL patterns, excluding any instances where the value is "XX". A, B, and C are static words that can appear in different positions wit ...

javascriptnode.js

Understanding Java and JavaScript variables within a JSP webpage

I am currently working on populating a pie chart from Google with data fetched from my database. Although I have successfully retrieved the desired results in my result set, I am facing challenges in converting my Java variables into JavaScript variables ...

javajavascriptjsp

Issues with PHP not reflecting changes to MySQL database

I'm struggling to find a solution to the issue I'm facing on various forums. The problem involves two pages, an HTML page and a PHP page. The HTML page simply populates a dropdown list from a database column. Below is a simplified version of the ...

javascriptphpjqueryhtmlmysql

What is the best way to include a subscript (small letter) beneath a word using html and css bootstrap 5?

Is it possible to add a small letter (sub) below a word in HTML and CSS? I have included a screenshot for reference. I want to display "Max 100, Min 1" just like shown in the image. Here is my code: <input type="text" class="textarea" ...

htmlcssbootstrap-5

What method is most effective for duplicating objects in Angular 2?

Is it just me, or does Angular 1.x have methods on the global angular object like angular.copy and angular.shallowCopy that are missing in Angular 2? It seems like there is no equivalent version in Angular 2 documentation. If Angular 2 doesn't plan on ...

javascriptangularjsangular

Using a Custom Variable in PayPal Email Links

Currently, I am developing a compact integrated application for a project that does not involve using a form. In this particular project, the use of HTML is not necessary and instead, only a link can be passed to the browser. The purpose of this link is to ...

phphtmlpaypal

XMLHttpRequest Refusing to Send Data

This snippet of code is crucial for the custom extension: let url = "https://mywebsite.com/data.php"; function sendRequest() { var client = new XMLHttpRequest(); client.open("POST", url, true); client.setRequestHeader("Content-Type", "text/pla ...

javascriptjqueryajaxxmlhttprequest

Steps to successfully set up a React application without encountering any installation errors

Hey everyone, I've been trying to install React on my system for the past two days but keep encountering errors. Initially, I used the commands below to install the React app and it worked smoothly: 1. npm install -g create-react-app 2. create-react- ...

javascriptnode.jsreactjsreact-nativenpm

Mistakenly appearing at the top of the window instead of the bottom of the window

Utilizing Vue.js to fetch resources from a Laravel API periodically and paginate(), after retrieving the initial 10 instances, I aim to get the next 10. Here's how my method looks: scroll () { window.onscroll = () => { let bottomOf ...

javascriptvue.js

Changing the Value of an Input Element Dynamically in React: A Step-by-Step Guide

In a scenario where I have a component that takes an element, such as <input />, and I need to update its value programmatically after 15 seconds. Initially, I had the following approach in mind: const MyComponent = (myInput: JSX.Element) => { ...

javascriptreactjstypescriptreact-hook-form

The functionality of oTable.fnFilter is malfunctioning

I'm trying to implement a search functionality in the thead section of datatables, but unfortunately it's not functioning as expected. $("#listings_row thead input").keyup( function () { oTable.fnFilter( this.value, $(this).attr('id&apo ...

jquerydatatables

Problem with Loading Images in JSP

When trying to display an image on my jsp page using the code < img src="C:/NetBeanProject/images.jpg" alt="abc" width="42" height="42"/>, the image does not appear. Is there something incorrect with this code? ...

htmljspjakarta-ee

Using JQuery to rebind() after resetting the count

In my game, I have implemented a feature to ensure that the start button can only be clicked once each time it appears in order to prevent the function from loading multiple times. I wrote some code that tracks the number of clicks and unbinds the click e ...

javascriptjquery

Ways to extract only numbers from a string

I have encountered a frustrating issue in VueJS: I am receiving an object with the following structure: { "description": "this is our List.\n Our Service includes:\n-1 something\n-2 something else\n and another thing\n"}` My dile ...

javascriptvue.jsreplace

NodeJS - The server returns a 404 error before ultimately displaying the requested page

I'm having trouble with my nodeJS application. When I make an asynchronous call using ajax, the server first responds with a 404 error before loading the page. The application functions properly, but I keep receiving repetitive logs stating "Can' ...

javascriptnode.jsajaxhttp-status-code-404

Calculate the duration in seconds using the console

Is it possible to display the time of an action in seconds instead of milliseconds using console.time? Below is my code: console.log('start load cache'); console.time('cache load ok executed in') // loading from mongo console.timeEnd( ...

javascriptnode.jsconsole.log

Layering elements using CSS and HTML to create a background effect

I have created a menu using div elements and I want one of the menu items to have a background that extends behind it to the body. Here is the structure: body { background-image: url(path/body.png); } #menu { overflow: hidden; width: 400px; ba ...

htmlcss