Передача HTML-элемента в функцию Javascript

Question

Я знаю, что на этот вопрос ответили, но, похоже, ни один из вопросов не имеет отношения именно к моей точке зрения. Мой код приведен ниже. Мне нужно передать либо переменную $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();
    });
};

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

Надеюсь, это поможет. Приветствия

Answer 2

это ожидание можно сделать с помощью 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.
        });
 }());

скрипка здесь

Answer 3

Использование SecondAnimation.apply(this).

Answer 4

Как насчет изменения SecondAnimation(this); на SecondAnimation($dynamicPanel);? Похоже, он будет делать то, что вы хотите.