Question

I have the following HTML:

<div id="wrapper">
      <div class="p1">
          <a href="#" class="quickFlipCta"><img src="Test Pictures/QuestionMark.gif" /></a>
      </div>

      <div class="p2">
          <a href="#" class="quickFlipCta"><img src="Test Pictures/flower.gif" /></a>
      </div>
</div>

I am using a plugin that works as a flipping animation between panels (p1 and p2)

The following works perfectly:

last.parent().parent().quickFlipper({refresh :1});
$(this).parent().parent().quickFlipper({refresh :1});

However, I want $(this).parent().parent().quickFlipper({refresh :1}); to be delayed.
I tried using setTimeout:

last.parent().parent().quickFlipper({
    refresh: 1
});
setTimeout(function () {
    $(this).parent().parent().quickFlipper({
        refresh: 1
    });
}, 1200);

When I do this, the function within the setTimeout is not executed at all. I was wondering if I should be using something else besides setTimeout to delay $(this).parent().parent().quickFlipper({refresh :1});

I have read the documentation on the plugin and nothing is there about this issue.

Here is my full code:
http://jsfiddle.net/kBDFD/

Answer 1

Inside of setTimeout(), you will have lost the value of this so that’s why your code would not work (this will be set to the window object).

You can use something like this instead:

var self = this;
setTimeout(function () {
    $(self).parent().parent().quickFlipper({refresh: 1});
}, 1200);