jquery, slideToggle not behaving correctly on mouse hover

Whenever the mouse hovers over my div with the class .frame, I slideToggle a div with the class .content. And when the mouse leaves .frame, I toggle .content back again. Everything seems to be working fine except for two issues: the effect gets messed up if the mouse enters and exits .frame quickly, and for some reason, .frame and .content are not aligned properly.

Here is my CSS:

.frame{
    border-style:solid;
    border-width:1px;
    width:10%;
     position:relative;
}

.content { 
    border-style:solid;
    border-width:1px 1px 0px 1px;
    position:absolute;
    display:none;
}

This is my HTML:

<br><br>

<div class="frame">
    <div class="content"></div>
    <div class="inside">bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br /></div>
</div>

And here is the jQuery code:

$(document).on('mouseenter', '.frame', function() { 
    var el = $(this);
    content = $(".content");
    content.css({"bottom":el.height(),"width":el.width()});
    content.html('ok ok ok ok');
    el.css("border-top-color","#FFFFFF");
    content.slideToggle(300);   
}).on('mouseleave','.frame', function() {
    var el = $(this);
    content = $(".content");
    content.stop().slideToggle(300, function(){
        content.html('');
        el.css("border-top-color","#000000");
    });
});

For reference, you can check out this jsfiddle link: http://jsfiddle.net/malamine_kebe/Uj2yh/

Answer №1

To tackle the initial issue, pass true, true as parameters to slideToggle

$(document).on('mouseenter', '.frame', function() { 
    var el = $(this);
    content = $(".content");
    content.css({"bottom":el.height(),"width":el.width()});
    content.html('ok ok ok ok');
    el.css("border-top-color","#FFFFFF");
    content.stop(true, true).slideToggle(300);  
}).on('mouseleave','.frame', function() {
    var el = $(this);
    content = $(".content");
    content.stop(true, true).slideToggle(300, function(){
        content.html('');
        el.css("border-top-color","#000000");
    });
});

To solve the alignment issue - the problem arises because the border is on the frame element and not on the content inside the frame, causing the frame's border to extend beyond the content's border. The solution applied involves shifting the content to the left by a negative pixel value.

.content { 
    border-style:solid;
    border-width:1px 1px 0px 1px;
    position:absolute;
    display:none;
    left: -1px;
}

Check out the demo here: Fiddle

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

CSS position: sticky not keeping search bar at the top of the page

I'm having trouble getting a search bar to stick at the top of a div using position: sticky. I've checked for common issues like overflow: hidden on parent elements without specified height, but that's not the problem in this case. Here&apos ...

Enable lodash access throughout a React Native application

Is it possible to have lodash automatically accessible in all files within a React Native project without needing to import it every time? ...

What is the best method to determine the mean score by utilizing the ID values obtained from API responses?

These are the responses retrieved from the API: const attractions = [ {"id": 1,"name": "drive on avenue"}, {"id": 2, "name": "diving"}, {"id": 3,"name": "visiting ma ...

My website gets all wonky when I try to resize the browser

Here is a visualization of my website's ideal appearance: However, the actual display varies on different computers. After testing with browsershots.org, I noticed that my website looks messy on most browsers and even when resizing the browser window ...

Insert a hyperlink button using InnerHtml

I am facing an issue with displaying a list item that contains a tab and a link button: <li runat="server" id="liActivityInvoices"><a href="#tabActivityInvoices">Invoices</a><asp:LinkButton runat="server" ID="btnLoadInvoice" OnClick=" ...

Error encountered while establishing connection with MongoClient

My server is returning the following error message: MongoClient.connect('mongodb://<'yoda'>:<'yoda69'>@ds235778.mlab.com:35778/satr-wars-quotes', (err, client) => { ^^^^^^^^^^^^^ SyntaxError ...

The React Native Expo is throwing an error stating that it is unable to locate the module 'minizlib'

At the instructions available in the read.me of https://github.com/react-community/create-react-native-app Upon selecting my template using the expo init command, I encountered the following error: Cannot find module 'minizlib' Error: Cannot fi ...

Implementing a button on a polygon shape within an SVG

I have an SVG at the bottom and I would like to place a button on the bottom line that is also responsive. How can I achieve this using CSS? What I am trying to accomplish: Example Image Is it possible with just CSS and how should I go about implementin ...

What are the best ways to ensure a website is responsive in a vertical

When designing a responsive webpage, I encountered an issue with the body element not properly expanding the content vertically. Despite enlarging the web content horizontally, the body failed to adjust its height accordingly, resulting in unwanted black a ...

Issue encountered when setting a background image in Angular

When trying to add a background image and set it to cover the entire browser window, I encountered an issue where the image appeared very small and did not fully cover the background. As someone new to Angular, my understanding of how this process works i ...

Switch between clicking and hiding

I am currently working on data tables and have successfully loaded my table via ajax, which also populates a new row drop down. However, I am experiencing an issue where I can get the row to drop down but cannot get it to close again. It simply adds the ...

Concealing buttons and Enabling others using ajax

I am facing a situation where I need to modify the behavior of a modal window on my webpage. The modal currently has two buttons for confirmation and cancellation, as shown in the code snippet below. Inside this modal, there is a <div class = "resp"> ...

Ways to display notifications when the user is not actively browsing the website?

How can websites display notifications even when the user is not actively on the site? Take Facebook messenger, for instance. Even with the page closed, notifications still pop up. The same goes for Twitter, which also sends push notifications. I ...

Currently, I am working on a project and encountering an issue with html2canvas

const handleDownloadImage = async () => { try { const canvas = await html2canvas(cardRef.current); console.log(cardRef.current); const imageData = canvas.toDataURL("image/png"); setImageUrl(imageData); } catch ( ...

Utilizing Visuals from a Vue Component Collection

As I attempt to publish a Vue library to npmjs, I encounter an issue with the images within it. After publishing the app to NPM and importing it into my main app, everything appears to be working correctly. However, the paths to the images in the library ...

Detecting the click area within a window using JavaScript to automatically close an element

Hello everyone, I am currently working on implementing a JavaScript code that is commonly used to detect click areas for closing an element such as a side navigation or a floating division when the user clicks outside of the element. The functionality wo ...

Troubleshooting issue: jQuery/Ajax selector not functioning as expected

After using jQuery.ajax() to fetch HTML content from a PHP source and inject it into an element on the page, I've noticed that jQuery selectors do not work on the elements within that loaded HTML. Is this a common issue or should I provide an example ...

Picture is not showing up on my MVC software

Within a table containing multiple other tds, I am having an image tag. <table class="MyClass"> <tr> <td> @Html.LabelFor(m => m.ShopName) </td> <td> @Html.TextBoxFor(mode ...

Master the art of utilizing angular-filter

Encountering some challenges while attempting to utilize angular-filter: The following links have been imported into the HTML file: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> <script src=" ...

What is causing .attr('title') to retrieve the title of the element before?

UPDATE Flexslider now includes several callback spaces for use, making this functionality possible. after: function(){}, //Callback: function(slider) - Fires after each slider animation completes Thank you to everyone who contributed! LIVE CO ...