将HTML元素传递给Javascript函数

Question

我知道这个问题已经有答案了，但似乎没有一个问题和我的要点完全相关。我的代码如下。我需要将变量$dynamicPanel传递到第二个函数中，或者将this传递到第二个函数中。任何一种方法都可以接受。

顺便说一下，是否有任何方法可以在不再使用animate()方法的情况下等待一些秒数来执行FirstAnimation函数。

$(document).ready(function FirstAnimation() {
    var $dynamicPanel = $(".dynamicPanel");
    $('.dynamicPanel').animate({
        opacity: 0,
        left: '100'
    }, 5000, function () {
        alert('first animation complete');
        SecondAnimation(this);
    });
});

function SecondAnimation(this) {
    $(this).animate({
        opacity: 1
    }, 100, function () {
        alert('second animation complete');
        FirstAnimation();
    });
};

- Penumbra

Answer 1

this是一个保留字，不能用作参数名称。你应该这样做：

$(document).ready(function(){
   FirstAnimation();
});

function FirstAnimation() {
   //this function doesn't change, use your code
};

function SecondAnimation(elem) {         
    $(elem).animate({
        opacity: 1
    }, 100, function () {
        alert('second animation complete');
        setTimeout(function(){  //Delay FirstAnimation 7 seconds
           FirstAnimation();
        }, 7000);
    });    
};

希望这能帮到你。祝好！

- Edgar Villegas Alvarado

Answer 2

改成 SecondAnimation($dynamicPanel); 怎么样？看起来它会做你想要的事情。

- Jon

Answer 3

使用 SecondAnimation.apply(this)。

- Phillip Kovalev

Answer 4

这个等待可以使用 jQuery.delay() 来完成

$(document).ready(function FirstAnimation() {
    var $dynamicPanel = $(".dynamicPanel");
    $dynamicPanel.animate({
        opacity: 0,
        left: '100'
    }, 5000, function () {
        alert('first animation complete');
        SecondAnimation($dynamicPanel); // <--pass the proper variable ;)
    });
});

function SecondAnimation(this) {
    $(this).delay(5000).animate({ //<<-- wait five seconds
        opacity: 1
    }, 100, function () {
        alert('second animation complete');
        FirstAnimation();
    });
};

然而，您可以将整个函数称为递归并从数组中传递动画设置参数。因此，您可以重复使用该函数并仅更改行为。

 // store animationsettings in an array;
 var animationSettings = [{opacity: 0, left: '100'},{  opacity: 1 }];   
 // initialize the startup index
 var x = 1;   
 // cache selector
 var $dynamicPanel  =  $(".dynamicPanel");
 // single function
 (function animate(){
     x = x == 1 ? 0 : 1;//<--- toggle the index
     $dynamicPanel.delay(x * 5000).animate(animationSettings[x], 
        1000, 
        function () {
           animate(); // recursive call this function.
        });
 }());

点此查看代码示例

- Caspar Kleijne