CODEWITHSUNDEEP
javascriptjquery
helptomout
helptomout

Reputation: 195

set timeout for several objects

i have the following code for multiple flyers that when clicked will display a help text overlay that goes away after 4 seconds. I can get it to show the help text but the timeout doesnt work.

$(".flyercontainer").click(function(){
  $(this).children('.flyerHelp').css('opacity',0.8);
  setTimeout(function(){
      $(this).children('.flyerHelp').css('opacity',0);
  },4000);
})

thanks for your help.

Upvotes: 3

Views: 108

Answers (2)

Aaron
Aaron

Reputation: 5227

As mentioned above, this refers to the window object when used in the scope of the callback function for the window.setTimeout() method. You can get around this by setting a variable equal to this in the scope of the click handler for .flyercontainer, but outside of your call to setTimeout().

Alternatively, you can chain jQuery's delay() method between two zero-duration animations for the opacity of the object to achieve the same effect. (Demo: http://jsfiddle.net/V2ZYy/)

Upvotes: 0

alex
alex

Reputation: 490183

The this in your setTimeOut()'s callback is not what you think it is (it points to the global object, window).

$(".flyercontainer").click(function(){
  var children = $(this).children('.flyerHelp');
  children.css('opacity',0.8);
  setTimeout(function(){
      children.css('opacity',0);
  },4000);
});

Upvotes: 6

Related Questions