DIV appear/disappear on mouse enter/leave - javascript

I'm trying to make a navigation using jQuery. I'm very new to jQuery so I'm getting a bit stuck here.
Basically what I'm trying to do is have testbutton2 appear and hide when I mouse over/off testbutton1. I was able to get this to work with mouseenter/leave.
The part I'm trying to add is to keep testbutton2 visible when I have the mouse over testbutton2 and to keep testbutton2 visible if I cursor back onto testbutton1 - so only fade in or out once.
You'll see from my code exactly what I encountered and probably have a chuckle.
CSS
#testbutton1 {
float:left;
height:100px;
width:100px;
background:#69C;
}
#testbutton2 {
float:left;
height:100px;
width:100px;
background:#0C6;
display:none;
}
HTML
<div id="testbutton1"></div>
<div id="testbutton2"></div>
jQuery
$("#testbutton1").on({
mouseenter: function() {
$("#testbutton2").fadeIn();
},
mouseleave: function() {
$("#testbutton2").fadeOut();
},
});
$("#testbutton2").on({
mouseenter: function() {
$("#testbutton2").fadeIn();
},
mouseleave: function() {
$("#testbutton2").fadeOut();
},
});
JSFiddle
DEMO

Or you can do it in pure css.
Wrap both buttons in a larger div and show the second button only while the mouse hovers over the larger div:
<div id="buttons">
<div id="testbutton1"></div>
<div id="testbutton2"></div>
</div>
#buttons:hover div {
display:block;
}
http://jsfiddle.net/r267b/1/

You can do something like
$("#testbutton1").on({
mouseenter: function () {
$("#testbutton2").fadeIn();
},
mouseleave: function () {
var $target = $("#testbutton2");
//delay the fade out to see whether the mouse is moved to the second button
var timer = setTimeout(function () {
$target.stop(true, true).fadeOut();
}, 200);
$target.data('hoverTimer', timer);
}
});
$("#testbutton2").on({
mouseenter: function () {
//if mouse is moved inside then clear the timer so that it will not get hidden
clearTimeout($(this).data('hoverTimer'));
$(this).stop(true, true).fadeIn();
},
mouseleave: function () {
$(this).stop(true, true).fadeOut();
}
});
Demo: Fiddle

This is solved with timers, as Arun P Johny said...
But as far as I saw, what you want to do is a menu.
Have you thought about using jQuery UI menu widget?
http://jqueryui.com/menu/

I suggest to use status variables that stores if you are hovering over button1 or over button2.
var isOver1 = false;
var isOver2 = false;
Then, add conditions to mouseleave and mouseenter in order to set hide or to alter the status variables, e.g.:
mouseleave: function() {
isOver1 = false;
window.setTimeout( function() {
if (!isOver2) {
isOver2 = false;
$("#testbutton2").fadeOut();
}
}, 50);
The timeout is necessary because if you leave testbutton1, you are not entering testbutton2 at exact the same time. So waiting a bit allows to fire the testbutton2 enter event.
Here is the full demo:
http://jsfiddle.net/KTULJ/2/
Leaving button1 to button2 keeps button2, leaving back to button1 still keeps button2, leaving any button towards the space around hides button2.
With this approach, you don't need to stop an animation as it doesn't start one if it is not necessary.

Related

Perform multiple clicks as long as user is hovering over an element in jQuery

I have the following jQuery. What it does is that once you hover over the next or previous arrows, it clicks on them, making the slider move. I need to modify this code, so it keeps clicking as long as you are hovering, right now, it only does it once.
$( "#slider .next, #slider .prev" ).hover(
function() {
$(this).click();
},
function() {}
);
The slider uses a jQuery plugin called Tiny Carousel
Thanks
This will trigger a click on the elements every second:
var clr;
$(".next, .prev").hover(function (e) {
clr = setInterval(function () {
$(e.target).click();
}, 1000)
}, function () {
clearInterval(clr);
});
jsFiddle example
var handle=null;
$( "#slider .next, #slider .prev" ).hover(
function() {
var self=$(this);
if(handle!=null)
clearInterval(handle);
handle = setInterval(function(){
$(this).click();
},100);
},
function() {}
);

Toggle animation on click of div?

please look at this fiddle http://jsfiddle.net/rabelais/4X63B/3/
In this fiddle when one hovers on the bars the animations start and stop. I want to know how to change this Jquery code so that the animation starts and stops on click instead? Also when one animation is started and the user clicks on the other bar it will pause to. At the end of each animation a refresh button is display to reset the animation.
$('#one').mouseenter(function(){
$('.alt0').animate({width: $(this).width()}, ($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})
});
$('#refresh-1').click(function(){
$('.alt0').width(0);
$(this).hide();
})
$('#one').mouseleave(function(){
$('.alt0').stop()
});
Try
$('#one').on('click', function () { //when first is clicked
$('.alt1').stop(); //stop second animation
$('#two').removeClass('active'); //remove seconds active class
if ($(this).hasClass('active')) { //check if clicked item has active class
$('.alt0').stop(); //stop animation
$(this).removeClass('active'); //remove active class
} else { //if not active or animating
$(this).addClass('active'); //add active class
$('.alt0').animate({ //start animation
width: $(this).width()
}, ($(this).width()) / 2 * 1000, "linear", function () {
$("#refresh-1").show();
});
}
});
$('#refresh-1').click(function () {
$('.alt0').width(0);
$(this).hide();
})
Similarly do the same for second bar. If you dont want another bar to stop animating on click of other bar
just remove the part from code
$('.alt1').stop(); //stop second animation
$('#two').removeClass('active');
$('.alt0').stop(); //stop firstanimation
$('#one').removeClass('active');
Full example http://jsbin.com/UseTIji/1/
First change mouseenter to mouse click
$('#one').mouseenter(function() → $('#one').click(function()
Enter some variable that will change on every click:
var oneIsPlayed = false
$('#one').click(function() {
oneIsPlayed = !oneIsPlayed;
if ( oneIsPlayed ) {
//code to stop
} else {
//code to start animation
}
})
Breaking down the code:
$('#one').mouseenter(function(){
$('.alt0').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})});
This is the part that starts the animation when the mouse enters the element. You can change it so the animation starts on a mouse click by changing it to click:
$('#one').click(function(){
$('.alt0').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-1").show();
})});
You can do the same with the stop animation component:
$('#one').click(function(){
$('.alt0').stop()
});
If you want to make a click on one bar stop the animation on the other, you can add a stop method call to the start animation call:
e.g.
$('#two').click(function(){
$('.alt1').animate({width: $(this).width()},
($(this).width())/2*1000,"linear",function(){
$("#refresh-2").show();
$('.alt0').stop();
})});
It seems that you jsfiddle isn't loading for me at the moment, so I can't test. But I hope that can get you in the right direction.
On click of that div, applying animation. Give some duration for that animation and when the duration get over you can get its callback so then remove that style.
$(document).ready(function () {
$('#service').click(function () {
$("#ServiceSublist").animate({opacity: 0.25,
left: "+=50",
height: "toggle"
}, 1000, function() {
alert("amination complete");
});
});
});

menu should hide when not being hovered over with timeout

What I am trying to accomplish is having a menu that will show up when a "button" is clicked (the button and menu are in separate elements so the mouse is not hovering over the menu initially).
The menu should hide itself if it is not hovered over within the duration of the timeout (currently it does this, but only the first time it is clicked).
Also, if the element gets hovered over, I would like hide on mouseout and clear the timer and clicking the button again would reset the timeout (it is not resetting maybe?).
I have tried several incarnations and nothing I have tried has behaved correctly and am looking for advice. This his is what I am currently using:
var mytimer = window.setTimeout(function() {$('.menu-div').slideUp(function() {
window.clearTimeout(this.mytimer);
})
}, 5000);
$().ready(function(){
$('#menu-button').click(function () {
$('.menu-div').slideDown();
$(mytimer);
});
$('.menu-div').mouseenter(function() {
window.clearTimeout(this.mytimer);
});
$('.menu-div').mouseout(function() {
$('.menu-div').slideUp(200);
});
});
I think you want something like this (just a guess, because you didn't give any HTML)
$(function(){
var mytimer=0;
$('#menu-button').click(function () {
$('.menu-div').slideDown();
mytimer = setTimeout(function(){
$('.menu-div').slideUp();
}, 5000);
});
$('.menu-div').mouseenter(function() {
clearTimeout(mytimer);
});
$('.menu-div').mouseleave(function() {
$('.menu-div').slideUp();
});
});
DEMO.

Fading Latest News Ticker

I'm looking to get the most efficient way to produce a latest news ticker.
I have a ul which can hold any number of li's and all I need to to loop through them fading one in, holding it for 5 seconds and then fading it out, one li at a time. The list is displaying with an li height of 40px and the well it displays in is also 40px which with overflow: hidden which produces the desired effect. Also to be able to hold the li in place if the cursor hovers over it while its being displayed would be great to build it.
I know there is the jQuery ticker plugin that is widely used (ala the old BBC style) but I've tried to use it and it seems so bulky for the simplicity I need and it plays havoc with the styling I use.
I've been using this so far:
function tickOut(){
$('#ticker li:first').animate({'opacity':0}, 1000, function () {
$(this).appendTo($('#ticker')).css('opacity', 1); });
}
setInterval(function(){ tickOut () }, 5500);
But it doesn't actually fade in the next li so the effect is a bit messy.
If someone could suggest some alternations to help produce the effect I need that would be so useful.
Thanks
hide() and call fadein() the element after it becomes the top of the list.
function tickOut(){
$('#ticker li:first').animate({'opacity':0}, 1000, function () {
$(this).appendTo($('#ticker'))
$('#ticker li:first').hide()
$('#ticker li:first').fadeIn(1000)
$('#ticker li:not(:first)').css('opacity', '1')
});
}
setInterval(function(){ tickOut () }, 5500);
see:
http://codepen.io/anon/pen/lHdGb
I woudl do it like that:
function tickOut(){
$('#ticker li:first').animate({'opacity':0}, 1000, function () {
$(this).appendTo($('#ticker')).css('opacity', 1); });
}
var interval;
$(function() {
interval = setInterval(function(){ tickOut () }, 5500);
$('#ticker').hover(function() {
if(interval)
clearInterval(interval);
$('#ticker li:first').stop();
$('#ticker li:first').css('opacity', 1).stop();
}, function(){
interval = setInterval(function(){ tickOut () }, 5500);
});
});
See $('#ticker').hover which clears interval and stops animation and returns opacity to 1 when mouse got inside UL (may be changed to do that when only some special element inside LI is under mouse) and starts it again once it left that UL. Demo: http://jsfiddle.net/KFyzq/6/

Show image after there is hover on a link for 1500ms

I want to show an image after there is hover on link for atleast 1500ms or there is a click. How can I implement this minimal period hover condition while showing up the image ?
The image should remain visible until there is hover on the link or on itself. & should disappear as the mouse moves out of both. How can I implement this ? Thanks in advance!
http://jsfiddle.net/sSBxv/
$('a').click(function() {
alert(1); // alert on click
})
.hover(function() { // when mouse is entering
var $this = $(this);
// set timeout, save timeout id on element to clear later
$this.data('timeout', setTimeout(function() {
$this.click(); // click after 1500ms
}, 1500));
}, function() { // when mouse is leaving
clearTimeout($(this).data('timeout')); // stop the timeout
});
Try this
var hoverTimer;
$("linkSelector").hover(function() {
hoverTimer = setTimeout(function() {
$("imgSelector").show();
}, 1500);
}, function(){
clearTimeout(hoverTimer);
}).click(function(){
clearTimeout(hoverTimer);
$("imgSelector").show();
});
Something to the effect of...
$("#MyLinkSelectorId").hover(function() {
//Do anything you need to do here when it is clicked/hovered
setTimeout(function() {
//Do all of the other things here
}, 1500);
});
Switch out hover with click or bind multiple events to take care of both event types. To hide the images, you can either use a selector on the images with the .hide() method or you can set the opacity if the browser supports it.
$("a.class").hover( function (){ //First parameter is onmouseenter, show the image
$("img").show();
}, function (){ //second is onmouseleave, set a timeout that will hide the image
setTimeout( function(){
$("img").hide();
}, 1500);
}).click( function() { //on click, hide the image right away.
$("img").hide();
});
Since it looks like you haven't already tried something I'll give you the simplest way using jQuery (please note I haven't tested this):
$("#idOfDiv").mouseover(function() {
setTimeout("alertMsg()",1500);
});
function alertMsg()
{
alert('Ive been entered for 1500ms')
}
Also if you're serious about software development you should've been able to come up with this yourself.

Categories

Resources