将 HTML 元素传递给 Javascript 函数答案

【问题标题】：Passing an HTML Element into a Javascript Function将 HTML 元素传递给 Javascript 函数
【发布时间】：2011-05-07 20:49:06
【问题描述】：

我知道这已得到解答，但似乎没有一个问题与我的观点完全相关。我的代码如下。我需要将变量$dynamicPanel 传递给第二个函数，或者将this 传递给第二个函数。无论哪种方式都是可以接受的。

当我们这样做时，有什么方法可以让我等待几秒钟来执行 FirstAnimation 函数，而无需再次使用 animate() 方法。

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

【问题讨论】：

标签： javascript jquery html parameters

【解决方案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);
    });    
};

希望这会有所帮助。干杯

【讨论】：

【解决方案2】：

将SecondAnimation(this); 更改为SecondAnimation($dynamicPanel); 怎么样？看起来它会做你想做的事。

【讨论】：

【解决方案3】：

使用SecondAnimation.apply(this)。

【讨论】：

【解决方案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.
        });
 }());

fiddle here

【讨论】：