I want to Show and hide one tooltip on hover of an anchor. but tooltip should be there till my cursor on it.
fiddle
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()}).mouseout(function(){
$(this).parent().find('#reasonTip').slideUp()
}
)
thanks in advance.
Try
jQuery(function ($) {
$('#showReasonTip').hover(function () {
var $target = $('#reasonTip');
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown();
}, function () {
var $target = $('#reasonTip');
var timer = setTimeout(function () {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$($('#reasonTip')).hover(function () {
clearTimeout($(this).data('hoverTimer'));
}, function () {
$(this).stop(true, true).slideUp();
});
});
Demo: Fiddle
You should try using mouseleave instead of mouseout and that too on #reasonTip and not on #showReasonTip.
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()
});
$('#reasonTip').mouseleave(function(){
$(this).parent().find('#reasonTip').slideUp()
});
Here's the modified fiddle with a small change in your code.
Related
I created jquery dropdown menu like this. I want to add slide effect on drop down menu. At the same time if I am placing my mouse over my menu tab the sub menu was opened now it is looking like one step up compare to the menu tab. I need slide like this. I here added my script.
function mainmenu() {
jQuery(" #na1").hover(function () {
//alert("hai-2");
jQuery(this).find('#content1').slideDown("fast");
}, function () {
jQuery(this).find('#content1').slideUp("fast");
});
}
$(document).ready(function () {
mainmenu();
});
Thanks in advance
$(document).ready(function () {
$("#na ul li").hover(function () {
$(this).siblings().find('ul').slideUp(400);
$(this).find('ul').slideDown(400);
}, function () {
$(this).find('ul').slideUp(400);
});
});
Demo:
http://jsfiddle.net/QkbDg/1/
Try this
$(document).ready(function () {
jQuery("#na ul li a").hover(function () {
jQuery(this).next('ul').slideDown(350);
}, function () {
jQuery(this).next('ul').slideUp(350);
});
});
DEMO
Try this:
function mainmenu(){
jQuery(" #na1").hover(function(){
jQuery(this).find('#content1').stop().slideDown("fast");
},function(){
jQuery(this).find('#content1').stop().slideUp("fast");
});
}
$(document).ready(function()
{
mainmenu();
});
Try this
function mainmenu(){
jQuery(".topm").hover(function(){
//alert("hai-2");
jQuery(this).find('.content').stop().slideDown("fast")
},function(){
jQuery(this).find('.content').stop().slideUp("fast");
});
}
$(document).ready(function()
{
mainmenu();
});
Demo : here
How do I make my .right-menu DIV to fadein only after a couple of moments the mouse is hovering its parent .right-menu-background ? The thing is that when you move the cursor quickly in and out, .right-menu DIV is reappearing a lot of times after.
How do I delay animation for few ms?
Here's the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").fadeIn();
}
,function(){
$(this).find(".right-menu").fadeOut();
}
);
});
a easy fix is to use .stop()
$(function () {
$(".right-menu-background").hover(function () {
$(this).find(".right-menu").stop(true, true).fadeIn();
}, function () {
$(this).find(".right-menu").stop(true, true).fadeOut();
});
});
using timer
$(function () {
$(".right-menu-background").hover(function () {
var el = $(this).find(".right-menu");
var timer = setTimeout(function(){
el.stop(true, true).fadeIn();
}, 500);
el.data('hovertimer', timer);
}, function () {
var el = $(this).find(".right-menu");
clearTimeout(el.data('hovertimer'))
el.stop(true, true).fadeOut();
});
});
Use the stop() function in front of fading calls ...stop(true, true)
With those two parameters set to true, the animation queue is cleared and the last animation is played this will get ride of the weird effect
$(this).find(".right-menu").stop(true, true).fadeIn();
Use .delay() function.
Here is the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").delay(800).fadeIn(400);
},function(){
$(this).find(".right-menu").fadeOut(400);
});
});
Check the demo here: http://jsfiddle.net/Mju7X/
hi I currently have the following script and I'm trying to add a show and hide feature to it instead of just having one hide and show it. essentially "click me" shows it and the button hides it, fiddle example
http://jsfiddle.net/9M99G/
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
});
Just do the same with the .below div and slideToggle it with $(this) :
$('.below').on('click', function(){
$(this).slideToggle();
});
demo jsFiddle
See more about slideToggle()
Use slideToggle
$('.below').on('click', function(){
$(this).slideToggle();
});
That will switch display state; if hidden it will show, if shown it will be hidden
If you want just the hide functionality for the button , this code will do
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).next('.below').slideToggle();
return false;
});
$('.below').on('click', function(){
$(this).slideToggle();
});
});
Demo fiddle : http://jsfiddle.net/9M99G/4/
Or if you want to hide the Click Me while the hide button is being displayed the code below does exactly that
$(document).ready(function () {
var content = $('.below').hide();
$('.toggleBtn').on('click', function () {
$(this).hide();
$('.below').show();
return false;
});
$('.below').on('click', function () {
$(this).hide();
$('.toggleBtn').show();
return false;
});
});
Demo fiddle : http://jsfiddle.net/9M99G/6/
DEMO
Try this, use slideDown and slideUp
$(document).ready(function () {
$('.below').hide();
$('.toggleBtn').click(function () {
$(this).next('.below').slideDown('slow');
return false;
});
$('.below button').click(function () {
$(".below").slideUp('slow');
});
});
So I have this function to prevent the body scrolling when the sidebar is hovered.
The problem is, I can't get the mouseout function to work properly.
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$(document).ready(function (){
$(".sidebarholder, .commentswrapper").hover(function (){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
})
})
My question is, how do I unbind it on the mouseout?
If I do this, it just stops working altogether.
$(".sidebarholder, .commentswrapper").mouseout(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll');
})
jQuery's hover() has built in "hover off", which might be helpful:
$(".sidebarholder, .commentswrapper").hover(
function (){ // hover over
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
},
function (){ // hover off
currentScroll=$(window).scrollTop();
$(window).unbind('scroll',lockscroll);
}
)
http://api.jquery.com/hover/
Have you tried
$(document).ready(function () {
$(".sidebarholder, .commentswrapper").hover(function () {
currentScroll = $(window).scrollTop();
$(window).bind('scroll', lockscroll);
}, function () {
currentScroll = $(window).scrollTop();
$(window).unbind('scroll');
})
})
How to make this just fade out on mouseover and just fade back in again on mouseleave?
My jsFiddle
$(function() {
var box = $('#box');
box.on('mouseover', function() {
box.fadeOut(500);
});
box.on('mouseleave', function() {
box.fadeIn(500);
});
});
$(function() {
$('#box').on('mouseenter mouseleave', function() {
$(this).stop().fadeToggle();
});
});
FIDDLE
try this:
$(function() {
var box = $('#box');
box.hover(function() {
$(this).fadeOut(500);
}, function() {
$(this).stop().fadeIn(500);
});
});
see this fiddle