CODEWITHSUNDEEP
javascriptjqueryhtmlcssthis
bboybeatle
bboybeatle

Reputation: 567

Cannot target div using 'this' inside a function inside 'each' function

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

Upvotes: 0

Views: 78

Answers (3)

Pytth
Pytth

Reputation: 4176

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

    });

});

});

Upvotes: 0

Patsy Issa
Patsy Issa

Reputation: 11303

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

Upvotes: 1

Arun Ghosh
Arun Ghosh

Reputation: 7754

$('.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);

    });

});

});

Upvotes: 1

Related Questions