Question

所以我只想让这些鼠标在你点击它们之后随机回来。我试图使用每个函数来定位每个.mouse div，这很好，但是如果我再次在settimeout函数中放入'this'它们就不会回来。如果我像下面的例子那样定位1个特定鼠标，那么1会按预期返回。它显然没有将每个函数的“this”带入下一个函数。

下面的代码有'.mouse-1'但这是我想要的'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>

^ html非常简单。绝对定位鼠标在图像上。他们只需要放松一下，然后在一段随机的时间后回来

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

    });

});

});

此外，在旁注中，我希望鼠标div在下降时无法点击

非常感谢

Answer 1

将此绑定，以便您可以将其置于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

Answer 2

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

    });

});

});

Answer 3

试试这个：

```

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

    });

});

});

不能使用＆＃39;这个＆＃39;在里面的一个功能里面每一个＆＃39;功能

3 个答案: