Speed up the opening and closing of a div element on mouse hover

Looking to create a smooth delay for opening and closing a div when mouse hover. Here is the code I have:

function show_panel1()
{
document.getElementById('hoverpanel1').style.display="block";
}

function hide_panel1()
{
document.getElementById('hoverpanel1').style.display="none";
}
<div class="col-sm-4 slideanim" onMouseOver="show_panel1()" onMouseOut="hide_panel1()">
      <div class="thumbnail panel">
        <img src="images/hospital.jpg" alt="Paris">
        <h3><strong>Service1</strong></h3>
        <div class="" id="hoverpanel1" style="display:none;">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare ...
          <h3 style="font-size:20px;">NEW PETS FOR SALE!</h3>
          <?php include"panelcarousel.php"; ?>
        </div>
      </div>
    </div>

Found this source but unsure how to implement it:

javascriptjqueryhtmlcss

Answer №1

Feel free to make use of the code snippet below if it meets your needs.

function display_panel1()
{
$('#hoverpanel1').slideDown();
}

function conceal_panel1()
{
$('#hoverpanel1').slideUp();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="col-sm-4 slideanim" onMouseEnter="display_panel1()" onMouseLeave="conceal_panel1()">
      <div class="thumbnail panel">
        <img src="images/hospital.jpg" alt="Paris">
        <h3><strong>Service1</strong></h3>
        <div class="" id="hoverpanel1" style="display:none;">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
          <h3 style="font-size:20px;">NEW PETS FOR SALE!</h3>
          <?php include"panelcarousel.php"; ?>
        </div>
      </div>
    </div>

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

What is the most effective way to retrieve the children and ID of an item in the jQuery Nestable plugin following a drag-and-drop action,

I'm currently implementing the jQuery Nestable plugin to build a menu editor for a website. After users click on menu items and rearrange their positions, I need to retrieve the item's ID and its Children.   Challenge: I'm struggling with ...

javascriptphpjquerycodeigniterjquery-plugins

How to use Jquery to dynamically alter cell backgrounds in a table based on their values?

I successfully imported the table from MySQL to HTML, as shown below: My script is designed to highlight the two lowest and two highest values in each column: $(document).ready(function(){ var $table = $("#tbTodos"); $table.find("th").each(functio ...

jquerycsshtml-tablecellhighlight

Issues with single and double quotation marks in JQuery

I'm having trouble inserting a tag into the page. The tag contains both single and double quotes, so I tried storing that part in a variable named content. Can someone explain why this content variable isn't displaying onclick after the code runs ...

javascriptjquery

What should be transmitted to the front-end following the successful validation of a token on the server?

My process starts with a login page and then moves to the profile page. When it comes to handling the token on the backend, I use the following code: app.use(verifyToken); function verifyToken(req, res, next) { if (req.path === '/auth/google&ap ...

javascriptnode.jsangularexpress

Whenever I attempt to use .ajax to post to an MVC 4 controller, the ViewModel is consistently null

My jQuery/HTML: @using(Html.BeginForm("Create", "Home", FormMethod.Post)) { <input name="ImageName" id="ImageName" type="hidden" /> <input name="XPos" id="XPos" type="hidden" /> <input name="YPos" id="YPos" type="hidden" /> ...

c#jqueryajaxasp.net-mvcjson

Converting JSON object settings to a string causes an error as it is not a valid function

For my project, I have been provided with a JSON object that contains various settings, some being strings and others booleans. One thing I am struggling with is adding an animation name from the object that is stored in a variable. aniFx.move(inner, { ...

javascriptjson

Tips on including a trash can symbol to rows in a bootstrap table using React

I am working on a table that contains various fields, and I want to add a trash icon to each row so that when it is clicked, the specific row is deleted. However, I am encountering an issue where the trash icon is not showing up on the row and I am unable ...

javascriptreactjstypescriptbootstrap-4react-bootstrap

Tips for merging jquery-1.10.2.js and jQuery-2.1.4.min.js simultaneously

Hey there! I've run into an issue where including jQuery-2.1.4.min.js and jquery-1.10.2.js together is causing the following error: custom.js:375 Uncaught TypeError: $(...).autocomplete is not a function If I remove jQuery-2.1.4.min.js, then I enc ...

phpjquery

Tips for extracting and utilizing the values of multiple checked checkboxes in a jQuery datatable

When a button is clicked, I am trying to retrieve the selected values of multiple rows from the datatables. However, with my current code below, I am only able to get the value of the first selected row. function AssignVendor() { var table = $(assig ...

javascriptjqueryhtmlcheckboxdatatables

Div vanishes once SVG Gaussian blur is applied

I'm attempting to add a Gaussian blur effect to an element that contains some child nodes with content. In Chrome, I successfully applied the blur using the following style: -webkit-filter: blur(2px); Unfortunately, Firefox does not support thi ...

htmlcssfirefoxsvgsvg-filters

Is there a way to detect when the browser's back button is clicked?

As I work on supporting an e-commerce app that deals with creating and submitting orders, a user recently discovered a loophole wherein they could trigger an error condition by quickly pressing the back button after submitting their order. To address this ...

javascriptjqueryhtmlbrowser-history

How can I assign an ID to retrieve the property of <?php $row->name;?> using AJAX?

As a newcomer to Code Igniter, I am working on implementing an edit button in front of each row. My goal is to have a pop-up or modal box appear without refreshing the page after clicking the edit button, displaying all the fields within that box. < ...

phpjqueryajaxcodeigniter

"Utilizing multiple optional parameters in Expressjs can lead to the request handler being

Hey there, I could use a fresh perspective on this issue I'm having. I am attempting to set up a request handler that can accept 0, 1, or 2 parameters like http://localhost:3000/{seed}/{size}. The parameters "seed" and "size" should both be optional. ...

javascriptnode.jsexpress

The script tag in NextJS is not properly loading the Amplitude library

I am facing an issue with loading events using Amplitude JS for tracking, despite having the correct code in place. Here is the code snippet that I used: import Document, { Html, Head, Main, NextScript } from 'next/document'; import Script from & ...

javascriptnext.jsamplitude-analytics

Leverage the Axios package to make requests within a for loop

I'm new to JavaScript and currently working on a project using Vue.js, Axios, and the API available at . The goal of this project is to retrieve NBA player statistics for a homework assignment. I could use some assistance in addressing certain issues. ...

javascriptvue.jsfor-loopaxios

Oops! The provided value for the argument "value" is not a valid query constraint. Firestore does not allow the use of "undefined" as a value

I encountered an error while exporting modules from file A and importing them into file B. When running file B, the error related to Firebase Cloud Firestore is displayed. const getMailEvents = (startTime, endTime) => { serverRef = db.collection("Ma ...

javascriptnode.jsfirebasegoogle-cloud-firestore

How can I retrieve the current background color and revert it back after a .hover event?

I am trying to use the .hover function to change the background color of a menu. Each menu item has a different background color, so I want it to return to its original color when the user hovers off. In other words, I want the script to read the current b ...

jquerycssajax

Alter the content of a div depending on the values of three different elements

Hello everyone, I am new to the world of jQuery and javascript, and I am facing a challenge that I need some help with. Within a form, there are two fields that I would like to perform calculations on. Here is what I have attempted so far: jQuery.fn.calcu ...

javascriptjquerymethods

What steps should I take to have a specific input prompt a certain action?

I am currently working on creating a function that checks when a user inputs a number between 0 and 8, triggering an action corresponding to that specific number. For example, if the user enters 5, a picture and text should appear; whereas if they input 3, ...

javascripthtmlcss

Automatically populate fields with pre-filled information

In my database, I have a table named "Produits": public function up() { Schema::create('produits', function (Blueprint $table) { $table->id(); $table->string('reference')->nullable(); ...

javascriptphplaravellaravel-9