How can I wait for a click event ?
eg. I want that my <div> wait for 3 seconds after it's fade in, and if within 3 seconds the <div> is not clicked then it fade out.
I tried to give time 2 seconds in fadeOut but mouse click is not working it just fadeOut.
my .js file code:
$(document).ready(function () {
$(".arrow").hide()
$(".container").mouseenter(function () {
$(".arrow").fadeIn()
});
$(".container").mouseleave(function () {
$(".arrow").fadeOut(2000)
});
$(".arrow").click(function () {
$(".container").hide()
});
I'm not sure what you're trying to accomplish but your onClick handler isn't working because syntax is wrong.
Try this:
$(".arrow").on('click', function () {
$(".container").hide()
});
Also you seem to be missing the closing braces of the ready-function.
It should be like this:
$(document).ready(function () {
// Your code here
}); // Don't forget this line
Use a boolean to check if arrow has been clicked at the end of your time limit.
Example
$(document).ready(function () {
var clicked = false;
$(".arrow").click(function () {
clicked = true;
});
$(".container").hover(function () { // i put the two mouseenter, mouseleave functions into one hover(mousein, mouseout) function
$(".arrow").fadeIn();
setTimeout(function () {
if (clicked === false) {
$(".arrow").fadeOut(2000);
}
}, 3000);
}, function () {
$(".arrow").fadeOut(2000);
clicked = false; // i don't know if you want this or not. this resets everything on mouseout. if you want the .arrow thing to stay even after the mouse leaves .container, just get rid of this line
}); // .hover
}); // .ready
$(document).ready(function () {
var clicked = 0;
$(".container").mouseenter(function () {
$(".arrow").fadeIn();
setTimeout(function() {
if(clicked == 0) {
$(".arrow").fadeOut(2000);
}
},3000);
});
$(".container").mouseleave(function () {
$(".arrow").fadeOut(2000);
});
$(".container").click(function () {
clicked = 1;
});
Related
I have this function:
$(".insidediv").hide();
$(".floater").mouseenter(function(){
$(".hideimg").fadeOut(function(){
$(".insidediv").fadeIn();
});
});
$(".floater").mouseleave(function(){
$(".insidediv").fadeOut(function(){
$(".hideimg").fadeIn();
});
});
the function built to make a little animation, when you 'mouseenter' the div the picture I have there is hidden and than a few text show up.
it works fine if i move the mouse slowly. but if i move my mouse fast over the div the function getting confused or something and it shows me both '.insidediv and .hideimg,
how can i fixed that little problem so it wont show me both? thanks!
You need to reset the opacity, because fadeIn and fadeOut uses this css property for animation. Just stopping the animation is not enough.
This should work:
var inside = $(".insidediv"),
img = $(".hideimg");
duration = 500;
inside.hide();
$(".floater").mouseenter(function () {
if (inside.is(":visible"))
inside.stop().animate({ opacity: 1 }, duration);
img.stop().fadeOut(duration, function () {
inside.fadeIn(duration);
});
});
$(".floater").mouseleave(function () {
if (img.is(":visible"))
img.stop().animate({ opacity: 1 }, duration);
inside.stop().fadeOut(duration, function () {
img.fadeIn(duration);
});
});
I just introduced the duration variable to get animations of equal length.
Here is a working fiddle: http://jsfiddle.net/eau7M/1/ (modification from previous comment on other post)
try this:
var $insideDiv = $(".insidediv");
var $hideImg = $(".hideimg");
$insideDiv.hide();
$(".floater").mouseenter(function(){
$hideImg.finish().fadeOut(function(){
$insideDiv.fadeIn();
});
}).mouseleave(function(){
$insideDiv.finish().fadeOut(function(){
$hideImg.fadeIn();
});
});
This will solve your issue:
var inside = $(".insidediv"),
img = $(".hideimg");
inside.hide();
$(".floater").hover(function () {
img.stop(true).fadeOut('fast',function () {
inside.stop(true).fadeIn('fast');
});
},function () {
inside.stop(true).fadeOut('fast',function () {
img.stop(true).fadeIn('fast');
});
});
Updated Fiddle
You need to set the 'mouseleave' function when the mouse is still inside the
'floater' div.
Try this (i have tried it on the jsfiddle you setup and it works):
.....
<div class="floater">Float</div>
<div class="insidediv">inside</div>
<div class="hideimg">img</div>
var inside = $('.insidediv'),
img = $('.hideimg');
inside.hide();
$('.floater').mouseenter( function() {
img.stop().hide();
inside.show( function() {
$('.floater').mouseleave( function() {
inside.hide();
img.fadeIn();
inside.stop(); // inside doesn't show when you hover the div many times fast
});
});
});
.....
So, i have some animation actions, this is for my login panel box:
$('.top_menu_login_button').live('click', function(){
$('#login_box').animate({"margin-top": "+=320px"}, "slow");
});
$('.login_pin').live('click', function(){
$('#login_box').animate({"margin-top": "-=320px"}, "slow");
});
now i need to add some hiding action after click on body so i do this:
var mouse_is_inside = false;
$('#login_box').hover(function () {
mouse_is_inside = true;
}, function () {
mouse_is_inside = false;
});
for stop hiding this element on body click, and this for body click outside by login-box
$("body").mouseup(function () {
if (!mouse_is_inside) {
var login_box = $('#login_box');
if (login_box.css('margin-top','0')){
login_box.stop().animate({"margin-top": "-=320px"}, "slow");
}
}
});
Everything is fine but this panel animates after each body click, how to stop this and execute only one time? Depend on this panel is visible or not?
You'd normally do this sort of thing by checking if the click occured inside the element or not, not by using mousemove events to set globals :
$(document).on('click', function(e) {
if ( !$(e.target).closest('#login_box').length ) { //not inside
var login_box = $('#login_box');
if ( parseInt(login_box.css('margin-top'),10) === 0){
login_box.stop(true, true).animate({"margin-top": "-=320px"}, "slow");
}
}
});
And live() is deprecated, you should be using on().
I have an element in aspx page with class= "._aHide" it carrying a message, And it is shown repeatedly.
<div id="Message1" class="._aHide" runat="server" visible="true"><p>My Message</p></div>
aspx server side elements not created when page load if it's visible property = true.
I need to hide this div after 7 seconds of show it, unless mouse over.
I created this code
$(document).ready(function () {
var hide = false;
$("._aHide").hover(function () {
clearTimeout(hide);
});
$("._aHide").mouseout(function () {
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
hide;
});
$("._aHide").ready(function () {
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
hide;
});
});
But somthings wrong here
1- this code work for one time only, And I show this message many times.
2- All message boxes hides in one time, because I can't use $(this) in settimeout and I don't know why.
Thank you for your help, and I really appreciate it
Remove the point in the HTML code:
<div id="Message1" class="_aHide" runat="server" visible="true"><p>My Message</p></div>
See: http://api.jquery.com/class-selector/
tbraun89 is right, remove the "." in your html code.
Then, you can simplify your code like this :
JQuery hover have 2 functions using mouseenter and mouseleave
$(document).ready(function () {
var hide = false;
$("._aHide").hover(
function () {
//Cancel fadeout
clearTimeout(hide);
},
function(){
//re-set up fadeout
clearTimeout(hide);
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
});
//Set up fadeout
hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
});
i have the following jQuery code.
$(function() {
$('.clickme').click(function() {
$('.totalthing').slideToggle('slow','easeInOutQuart', function() {
// Animation complete.
});
$('.expandedcase').slideToggle('slow','easeInOutQuart', function() {
// Animation complete.
});
});
});
At the moment it closes one of the div's and opens another at the same time. What I want it to do is close the open div then once it is fully closed it opens the other.
try:
$(function() {
$('.clickme').click(function() {
var tot = $('.totalthing');
var exp = $('.expandedcase');
var frt = (tot.is(":visible"))?tot:exp;
var lst = (tot.is(":visible"))?exp:tot;
frt.stop().slideToggle('slow','easeInOutQuart', function() {
lst.stop().slideToggle('slow','easeInOutQuart', function() {/*complete*/});
});
});
});
Your comments should point you in the right direction. If you want one animation to start once the other is complete, then move it to the function.
$(function() {
$('.clickme').click(function() {
$('.totalthing').slideToggle('slow','easeInOutQuart', function() {
// Animation complete.
$('.expandedcase').slideToggle('slow','easeInOutQuart', function() {
// Animation complete.
});
});
});
});
It possible to check if the cursor is hovering on an element.
Something like
$("#divId").is("hover");
NOTE: I just want to check not set event.
.is(':hover');
or
$('#divId:hover');
Updated answer!
$("#foo").hover(function() {
$(this).data("hovered", true);
}, function() {
$(this).data("hovered", false);
});
Testing if it is hovered...
if ( $("#foo").data("hovered") ) {
// it is hovered
} else {
// it's not hovered
}
You can use jQuery's hover(), mouseenter() or mouseover()
$("#divId").hover(function() { alert("hovering"; });
This will fire on mouseenter and mouseleave. You can add separate event handlers for each.
So if you want to do something like, if hovering over #divId increase x by one, and when you stop hovering decrease y by one:
$("#divId").hover(function() { ++x; },
function() { --y; });
If you really want an if hovering:
var hovering = 0;
$("#divId").hover(function() { hovering = 1; },
function() { hovering = 0; });
...
// Then inside somewhere useful. Maybe in a setInterval, or triggered by
// another action...
if (hovering) { ...
Try it out with this jsFiddle
For example:
$(function() {
var hovering = 0;
$("div").hover(function() { hovering = 1; },
function() { hovering = 0; });
$(document).keyup(function() {
if (hovering) alert("hovering!"); // This is the "if hovering"
else alert("not hovering.");
});
});
You can use .hover(). It's can be used like so:
$("selector").hover(
function (){
//mouse over
},
function (){
//mouse out
}
);
An example of it's use from the documentation is here:
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
Depending on what you are doing either mouseover() (http://api.jquery.com/mouseover/) or hover() (http://api.jquery.com/hover/) can be useful.