I have 2 jquery functions:
$(document).ready(function(){
$("#title").click(function(){
$("#click").delay(2700)
.css({opacity: 0.0, visibility: "visible"})
.animate({opacity: 0.5
});
});
});
and
$(document).ready(function(){
$("#click").hover(
function () {
$("#card12").animate({top:'220px'},100);},
function () {
$("#card12").animate({top:'330px'},100);
});
});
This is how that's work:
1. I click (div id = #title)
2. (div id=#click) will shows up with 2700ms delay
3. whenever I point my cursor to (div id=#click), (div id=#card12) will slides up
My problem is:
1. I accidentally pointed my cursor into (div id =#click) area before 2700ms (the delay for (div id=#click) to shows up)
2. Instead of ignoring it, the (div id=#card12) responded to that(sliding up) as soon as (div id=#click) has been completely loaded
e.g: I point my cursor to (div id=#click) area, and move out the cursor outside the area back and forth for 2 times before 2700ms( the delay before (div id=#click) shows up).
Instead of ignoring that 2 initial hover ( before the (div id=#click shows up)), jQuery will slides (div id="#card12") twice, as soon as (div id=#click" has been completely loaded ( even though my cursor is outside the the(div id=#click) ) area by the time it has been loaded
My questions is:
is that possible to ignore whatever happened before 2700ms (the #click delay before it shows up)?
P.S: I know it is easier if I can perform that using codePen/ jsFiddle. But I don't know how to use codePen/ jsFiddle using 2 jquery-(ies?)
Thank you very much
Put your hover jQuery in the callback of your first animate jQuery.
$(document).ready(function () {
$("#title").click(function () {
$("#click").delay(2700).css({opacity: 0.0,visibility: "visible"}).animate({
opacity: 0.5}, function () {
$("#click").hover(function () {
$("#card12").animate({top: '220px'}, 100);
},function () {
$("#card12").animate({top: '330px'}, 100);
});
});
});
});