Animate with Jquery sliding technique

Allow me to explain a situation that may seem unclear at first glance.

I have implemented a jQuery script that animates a sliding box upon hover.

$(function() {
    $('.toggler').hover(function() {
        $(this).find('div').slideToggle();
    });
});

My question is whether there is a way to prevent the box from continuously popping up and down if the user rapidly moves their mouse over it multiple times.

Hopefully, this explanation makes sense.

Here is the HTML structure:

<div class ="expandableboxes">
    <div class="toggler"> This is the title 
        <div> This is the content to be toggled </div>
    </div>

    <div class="toggler"> This is the title 
        <div> This is the content to be toggled </div>
    </div>

    <div class="toggler"> This is the title 
        <div> This is the content to be toggled </div>
    </div>

    <div class="toggler"> This is the title 
        <div> This is the content to be toggled </div>
    </div>

    <div class="toggler"> This is the title 
        <div> This is the content to be toggled </div>
    </div>
</div>

Answer №1

Utilize both the stop and slideDown functions.

.stop( [clearQueue ] [, jumpToEnd ] )

Description: Cease the ongoing animation on the selected elements.

$(function() {
  $('.toggler').hover(function(e) {
    if (!$(e.target).hasClass("toggler")) { return; }
    $(this).find('div').stop().slideDown(1000, "easeOutBounce");
  });
});
.toggler > div { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<div class="expandableboxes">
  <div class="toggler">This is the title
    <div>This is the content to be toggled</div>
  </div>

  <div class="toggler">This is the title
    <div>This is the content to be toggled</div>
  </div>

  <div class="toggler">This is the title
    <div>This is the content to be toggled</div>
  </div>

  <div class="toggler">This is the title
    <div>This is the content to be toggled</div>
  </div>

  <div class="toggler">This is the title
    <div>This is the content to be toggled</div>
  </div>
</div>

Answer №2

For a smoother user experience, consider utilizing the mouseenter event instead of causing frequent pops up and down.

$(function() {
 $('.toggler'). mouseenter(function() {
  $(this).find('div').slideToggle();
 });
});

To see a demonstration, click here.

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

Unable to render JSON data using AJAX

I have a JSON file filled with various data and I'm trying to use AJAX to display it. Despite my efforts, I couldn't get it to work and after extensive research online, I decided to reach out for your assistance: $(document).ready(function ...

Exploring the features of React.js version 16

I'm confused about what {...props} does. I know it makes passing props easier, but what happens if there are no props to begin with? Take this example: const input = (props) => { let inputElement = null; switch(props.inputtype) { ...

Update the picture dynamically when hovering

Is there a way to change an image randomly when hovering over it? The hover effect is working fine, but the image does not revert back when the mouse moves out. Any suggestions on how to fix this? var arr = ["020", "053", "306", "035", "930"]; function ...

Expand the initial expansion panel within an Angular Material accordion by opening the first attachment

In Angular Material expansion panels, the expanded input can be used to automatically open a specific panel when the page loads. However, in my dynamic accordion where all panels are optional, I want the first panel to be opened by default. I could manual ...

How to stop parent event propagation in jQuery

I am facing a frustrating issue with my code. Every time I toggle a checkbox, the parent element's click event also triggers. I have experimented with various solutions like: event.stopImmediatePropagation(); event.stopPropagation(); event.preventD ...

Why does my jQuery.get() callback function not execute?

After implementing the code below, I expected to see 'hi mom' displayed between the <div id='job-status'></div> on the original page. However, the result is not as anticipated: $(function () { function show_status() { ...

Vue Subroutes within nested components do not automatically load

My application features a sidebar that I want to utilize to load the Patient view by default when accessing patient/:id. This should also trigger the loading of the PatientDashboard sub-view. Within the Patient view component, there is a router-view that ...

Tips for accessing the "data" of a PHP array using AJAX

My code snippet using Ajax: $.ajax({ type: 'post', url: 'url.php', dataType: 'JSON', success: function(data) { id = // Need to extract the ID data from 'data' } }); ...

What is the method for extracting style attributes from HTML using JavaScript?

Is there a way to extract only the applied CSS rules to a DOM node using JavaScript? I am familiar with getComputedStyle, but it retrieves all styles, not just those applied from stylesheets, inline styles, or injected into the CSSOM. The technique I hav ...

Issue with React redirect not functioning post transition

A component I created includes a redirection route that triggers after an animation finishes. Here is the code for reference: Menus.jsx class Menus extends Component{ constructor (props) { super(props); this.state = { select: 'esp ...

Ways to link a Javascript or Jquery function to an HTML form

I am looking to develop a form that can extract email addresses from input text. While I know there are many scripts available that can do this quite easily, my goal is to create one on my own. After reading, researching, and experimenting with differ ...

Achieving a perfect circle can be accomplished by setting both the width and height to the same

Trying to make the height of an element equal to its width For example, aiming for a perfect circle Although the console displays equal values, the resulting height is noticeably greater than the width $('button').on('click', funct ...

Switching from using jQuery's $.ajax method to Angular's $http service

I have been working on a jQuery code snippet that works seamlessly across different origins: jQuery.ajax({ url: "http://example.appspot.com/rest/app", type: "POST", data: JSON.stringify({"foo":"bar"}), dataType: "json", contentType: "a ...

Hidden input fields do not get populated by Angular submit prior to submission

I am in the process of implementing a login feature in Angular that supports multiple providers. However, I have encountered an issue with submitting the form as the loginProvider value is not being sent to the server. Below is the structure of my form: &l ...

I am seeking a way to conceal list elements according to a specified string input using JavaScript

Looking at the list items inside this div: <div class="container"> <h2>Vanishing Act Game</h2> <div> <li class="list-group-item go" id="item">Door#1</li> <li class="list-group-item go" id="it ...

JavaScript HTTP Requests

I came across this AJAX example in Stoyan Stefanov's book Object Oriented JavaScript on page 275. The example involves requesting three different files. I have a few questions that I was hoping someone could help me with! What does the line xhr.se ...

Modify the indentation format in CSS/JS

When the Tab key is pressed in an HTML page and the tabbed link gets highlighted, is it feasible to customize the style of that highlight? ...

Hide the border on a table with CSS

I recently installed a Wordpress Template and customized the table's background and text colors. However, I am struggling to remove the border around the table. Despite searching for solutions, my limited CSS knowledge has not led me to a fix that wor ...

How can I dynamically load a 3D model (in JSON format) at the current location of the mouse using Three.JS?

I'm currently working on a feature that involves loading a 3D model based on the mouse's position. Utilizing jQuery drag and drop functionality for this purpose has helped me load the model onto the canvas successfully, but I'm facing issues ...

Adding JavaScript validation to a form generated dynamically

I am working on creating a dynamic form and I need to add JavaScript validation to it. <?php echo'<form action="" nam="airform" onsubmit="return check()">'; while ($row=$run->fetch_assoc()) { if (empty($array_vendor)) { ...