FadeOut and FadeIn on hover problem. Building Pomodoro Clock [Spoilers]

FadeOut and FadeIn on hover problem. Building Pomodoro Clock [Spoilers]
0.0 0

#1

Hello Campers,

I’m working on my Pomodoro Clock.

I’m having a problem with jQuery which i can’t resolve.

1.When clock reaches 00:00, the #spinner-cover changes it’s content to “pomodoro’s up!”, and the background fades in with (.fadeTo()).
2. Then when user clicks #reset button, it resets the clock, changes the content of #spinner-cover to “start!”, but it should also fadeOut and fadeIn only when hovered. Unfortunately it does not.

Here’s what happens with css (in jQuery) when #reset is clicked:

 $('#spinner-cover').text("start!").fadeOut(0).hover(function() {
               $(this).fadeTo("fast", 0.99);
           }, function() {
               $(this).fadeOut("fast");
           });

.hover takes to arguments: a function to call when object is hovered, and the second function to call when hover is over. I guess i have these alright.

Does anybody see what’s wrong here?

Link : http://codepen.io/RycerzPegaza/pen/OXAqBG


#2

Look what I found on here :slight_smile:

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.

After .fadeOut() has been executed there is no more the element #spinner-cover, its gone. Nothing to .hover() over :’(

Try to replace it with .fadeTo("fast", 0)


#3
   $('#spinner-cover').text("Pomodoro's up!").fadeTo("fast", 0.95).delay(3000).text("start!");  

when the clock reaches 00:00 i immediately see .text("start!"). Why doesn’t it set the inner text to “Pomodoro’s up!” and then waits three seconds and THEN set the text to start! ?

Do i need to put a callback somewhere?

I wonder : Does the documentation must say i can use a callback as the last argument or I can use callbacks whenever i want (i would like that :D) ?


#4

According to docs:

Added to jQuery in version 1.4, the .delay() method allows us to delay the execution of functions that follow it in the queue.
It can be used with the standard effects queue or with a custom queue.

Just use setTimeout():

if (timeInSec < 0) {
  // toggleclass animate
  clearInterval(tickTock);
  $('#spinner-cover').text("Pomodoro's up!").fadeTo("fast", 0.95);
  setTimeout(function() {
    $('#spinner-cover').text("start")
  }, 3000);
}