To display a sliding div at the bottom of the page, utilize the `.show` class with the CSS property `position: absolute; bottom: 0px;`. This

Currently, I am using jQuery's .hide function to conceal an "extra details" div located within a parent div. When the user hovers over the parent div, it is designed to appear using .show/.toggle with jQuery UI slide effect.

However, I have encountered a problem: despite positioning the "extra details" div at the bottom of its parent using {position:absolute; bottom:0px;} and initially hiding it, when hovered in Chrome and Safari on OSX, the div slides out from the top and then abruptly jumps to the bottom once fully displayed.

In Firefox on OSX, this issue does not occur.

Furthermore, another issue arises if the mouse is rapidly moved back and forth over the element for approximately 5 seconds - it becomes disoriented and remains in the visible position even when not being hovered over.

I have created a jsfiddle http://jsfiddle.net/pWaMx/ showcasing these problems. Any insights into what might be causing these issues would be greatly appreciated.

jqueryjquery-uishow-hidecss

Answer №1

Modify 

$('.container').toggle("slide", {
    direction: "down"
}, 350);

to

$('.container').stop(true, true).toggle("slide", {
    direction: "down"
}, 350);

It is recommended to also set .container to display: none; in your CSS file.

Updated CodePen link: http://codepen.io/example/123/

Answer №2

This solution is great for my needs.

http://jsfiddle.net/pabo/pWaMx/13/

$(document).ready(function() {
    $('.tile').hover(function() {
        $('.box').stop().slideToggle("350");
    });
});

It's a simple and effective method that doesn't have any bouncing or erratic behavior, plus it works perfectly on my OSX Firefox and Safari browsers.

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

There seems to be a limitation in JS/JQuery where it is unable to append HTML that spans

I am encountering an issue with retrieving data in a div element. It seems that the function provided does not work correctly for files larger than a single line of code or even possibly a string. What can be done to resolve this? <ul class="dropdo ...

javascriptphpjqueryhtml

Positioning children within a div element

Howdy! I have a neat little setup with two divs stacked on top of each other, each containing child elements. My goal is to hide the first div and have the second div seamlessly take its place while keeping the child elements in their original position. C ...

css

Is there a way to create distance between these icons?

<div id="unique-icons"> <a href="#"> <img class="github-logo1" src="GitHub-Mark-64px.png" alt="first github logo"> </a> <a href="#"> <i ...

htmlcssicons

Updating style of element in EJS following POST request in Node.js using Express

I am working on a form page that is supposed to display a Success Alert (Boostrap) once the user fills out the form and clicks the Submit button. <form class="well form-horizontal" action="/contact" method="post" id="contact_form"> ... (input fiel ...

javascriptcssnode.jsexpressejs

Is it advisable to combine/minimize JS/CSS that have already been minimized? If the answer is yes, what is

Our app currently relies on multiple JS library dependencies that have already been minified. We are considering consolidating them into a single file to streamline the downloading process for the browser. After exploring options like Google Closure Compi ...

javascriptcssminifygoogle-closure-compileryui-compressor

Working with jQuery conditionals to manipulate JSON data

I'm working with JSON data that includes a field like this: "first_date": "2015-06-02" Using jQuery, I want to achieve something like this: if( valueOfFirstDate.substring(5, 6) == "06" ){ //change 06 to "June" } Can anyone guide me on how to e ...

javascriptjqueryjson

How to Retrieve Value from Table Using jQuery

As a beginner in the world of jQuery, I have come across a seemingly simple question that has left me puzzled. The task at hand involves manipulating the following table: <table class="mytable"> <th>name</th> <th>second</th> ...

jqueryhtml-tablehtml-select

Row within a table displaying link-like behavior

Here is the code I'm currently using: $('.table-striped tr').click( function() { var link = $(this).find('a').attr('href'); if(link != 'undefined') { window.location = link; } }).hover( func ...

javascripthtmlcsshyperlinkhtml-table

Performing an AJAX call using jQuery within a PhoneGap application to communicate with a Node JS server

I've searched everywhere online for a practical demonstration of a jQuery AJAX call to a Node JS server, but to no avail. Typically, a jQuery AJAX request to a PHP server follows this format: $("button").click(function() { $.ajax({url: "http://w ...

javascriptjqueryajaxnode.jscordova

Click on a link to use jQuery to sort the order of the <li>

Looking to rearrange list items by clicking either move up or move down. <div> <ul> <li>Item A <a class="moveUp">Move Up</a> <a class="moveDown">Move Down</a></li> <li>Item B <a class="m ...

javascriptjqueryhtmlsorting

Exploring ways to incorporate various classes into my validate() elements using jQuery

I'm currently using the jQuery method validate to verify this particular form: <form id="emailRecover"> <div class="row light-field-container error-container"> <input type="text" id="dniPassword" name="dniPassword" requ ...

javascriptjqueryvalidation

jquery combobox with overlapping autocomplete suggestions

Encountering an issue with the jquery autocomplete combobox where they overlap when positioned side by side. Referencing this link for guidance: http://jqueryui.com/autocomplete/#combobox <!doctype html> <html lang="en"> <head> <me ...

javascriptjqueryjquery-uiautocomplete

What is the best method to eliminate whitespace in mobile view when utilizing the <Image /> tag in Next.js?

I am currently developing a website using Next.js. I have used the <Image /> tag to display images on the site. On mobile view, I noticed some white space around the image components, while on desktop everything looks fine. Upon checking the network ...

cssimagesvgnext.jsnext-images

The textarea in my jquery code struggles to keep up with the amount of text I

function openTextArea() { $(".comment").click(function(){ var element = $(this); var id = element.attr("post_id"); $("#"+id).html('<form action="test.php" method="post"><textarea name="body" id="body_'+id+&a ...

jquerytextarea

Mobile Windows Z-Index

Struggling with the z-index issue on a video tag in Windows Mobile, particularly when it comes to my search box. <div portal:substituteby='common/search::search'></div> The goal is for the search box to appear above the video. ...

jqueryhtmlcsshtml5-videoz-index

Slideshow elements removed

I attempted to remove my links individually from the div id="wrapper", but unfortunately have encountered an issue while doing so: window.onload = function () { setInterval(function () { var wrapper = document.getElementById("wrapper"); var my_l ...

javascriptjqueryhtmlslideshowremovechild

Bootstrap dropdown fails to function following an AJAX request, despite attempting to reinitialize it

After doing some research on stackoverflow, I learned that it's important to refresh the dropdown on an ajax .load() event. However, I am a bit puzzled because the dropdown stops working after clicking it a couple of times. :/ jquery $(document).rea ...

jqueryajaxtwitter-bootstrap

Is it possible to incorporate jQuery Ajax into a Laravel + vue application?

As I embark on developing a Software as a Service web app, I find myself in a dilemma regarding the best approach to take. With over 3 years of experience working with PHP (core) and jQuery Ajax, I am now transitioning to Laravel and Vue.js. I am wonderi ...

jqueryajaxlaravelvue.jshttp

Steps to create a slideup effect using JavaScript

Upon clicking the answer text area for the first time, a message box will appear. Your Answer Thank you for contributing an answer to this platform! Please remember that this is a Q&A site, not a forum for discussion. Include specifics and share you ...

javascriptjqueryslider

Inconsistencies found with CSS Dropdown Menu functionality across various web browsers

Issue Resolved - See Update Below While working on creating a CSS-only dropdown menu, I encountered an issue where the submenu would disappear when the mouse entered a small 3-4px section within the first item on the submenu. Even though this problem occu ...

htmlcssmenunavigation