0

So I just want these mice to come back up after a random time when you click them. I am trying to use the each function to target each .mouse div, which works fine, however if I put 'this' again in the settimeout function they don't come back. If I target 1 specific mouse like the below example that 1 comes back as expected. Its clearly not taking the 'this' of the each function through into the next function.

The code below had '.mouse-1' but this is where I would like 'this'

http://thetally.efinancialnews.com/tallyassets/wackamouse/index.html

<div class="container">
  <div class="mice">
    <div class="mouse mouse-1"></div>
    <div class="mouse mouse-2"></div>
    <div class="mouse mouse-3"></div>
    <div class="mouse mouse-4"></div>
    <div class="mouse mouse-5"></div>
    <div class="mouse mouse-6"></div>
    <div class="mouse mouse-7"></div>
    <div class="mouse mouse-8"></div>
    <div class="mouse mouse-9"></div>
  </div>
</div>

^ The html is very simple. Absolutely positioned mice on an image. They just need to duck down then come back after a random amount of time

$('.mouse').each(function() {

$(this).click(function() {

$(this).animate({
'background-position-x': '0',
'background-position-y': '40px'
}, 300, function() {

var rand = Math.round(Math.random() * (7000 - 2000)) + 500; //between 7secs and 2.5 secs
setTimeout(function(){
    $('.mouse-1').animate({
 'background-position-x': '0',
 'background-position-y': '0'});
            },  rand);

    });

});

});

Also, on a side note, I'd like the mouse divs to be unclickable when they go down

Thanks alot

bboybeatle
  • 549
  • 1
  • 8
  • 28
  • possible duplicate of [Javascript callbacks losing 'this'](http://stackoverflow.com/questions/10766407/javascript-callbacks-losing-this) – cdhowie Oct 09 '14 at 16:38
  • 1. Including a fiddle or something would help -- at the very least the HTML. 2. Im not sure for certain whether this would work or not, but try: $('.mouse').each(function() { var that = this; ... Then using `that` to reference each mouse in the $setTimeout function? – Pytth Oct 09 '14 at 16:41
  • You can use `var ref = this;` then use ref instead of this – Zac Oct 09 '14 at 16:56

3 Answers3

1

Bind this so you can have it in the scope of the setTimeout:

 $('.mouse').each(function () {

    $(this).click(function () {

        $(this).animate({
            'background-position-x': '0',
                'background-position-y': '40px'
        }, 300, function () {

            var rand = Math.round(Math.random() * (7000 - 2000)) + 500;
            setTimeout(function () {
                $(this).animate({
                    'background-position-x': '0',
                        'background-position-y': '0'
                });
            }.bind(this), rand);

        }.bind(this));

    });

});

Demo

Patsy Issa
  • 11,113
  • 4
  • 55
  • 74
1
$('.mouse').each(function() {

$(this).click(function() {
var $mouse = $(this); 
$(this).animate({
'background-position-x': '0',
'background-position-y': '40px'
}, 300, function() {

var rand = Math.round(Math.random() * (7000 - 2000)) + 500; //between 7secs and 2.5 secs
setTimeout(function(){
    $mouse.animate({
 'background-position-x': '0',
 'background-position-y': '0'});
            },  rand);

    });

});

});
Arun Ghosh
  • 7,634
  • 1
  • 26
  • 38
0

Try this:

```

$('.myMouse').each(function() {

$(this).click(function() {
var that = this;

$(this).animate({
'background-position-x': '0',
'background-position-y': '40px'
}, 300, function() {

var rand = Math.round(Math.random() * (7000 - 2000)) + 500; //between 7secs and 2.5 secs
setTimeout(function(){
    $(that).animate({
 'background-position-x': '0',
 'background-position-y': '0'});
            },  rand);

    });

});

});
Pytth
  • 4,008
  • 24
  • 29