Geek asks and answers

Passing an HTML Element to a Javascript Function

I know that this has been answered, but it seems that not one of the questions has anything to do with my point. My code is below. I need to pass either a variable $dynamicPanelto a second function, or pass thisinto a second function. In any case, this will be acceptable.

While we are doing this, is there a way I can wait a certain number of seconds to execute a function FirstAnimationwithout using a method 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();
    });
};
+3
source share
4 answers

thisis a reserved word and cannot be used as a parameter name. You must do 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);
    });    
};

Hope this helps. Greetings

+2
source

SecondAnimation(this); SecondAnimation($dynamicPanel);? , , .

0

this wait can be done using 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();
    });
};

however, you can call the whole function recursive and pass the animation parameters as parameters from the array . This way you reuse the function and only change the behavior.

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

the violin is here

0
source

Use SecondAnimation.apply(this).

0
source

More articles:


All Articles