Question

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

Answer 1

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);
      });
    });
  });
});