Passing an HTML Element into a Javascript Function

Question

I know this has been answered, but it seems that none of the questions are relevant to exactly my point.. My code is below. I need to pass in either the variable $dynamicPanel in to the second function, or pass this in to the second function. Either way would be acceptable.

While we're at it, is there any way that I can wait some number of seconds to execute the FirstAnimation function without again using the animate() method.

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

Edgar Villegas Alvarado · Accepted Answer · 2011-05-07 21:18:48Z

2

this is a reserved word and can't be used as a parameter name. You should 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. Cheers

answered May 7, 2011 at 21:18

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon · Accepted Answer · 2011-05-07 20:52:32Z

0

What about changing SecondAnimation(this); to SecondAnimation($dynamicPanel);? It looks like it would do what you want.

answered May 7, 2011 at 20:52

Jon

439k85 gold badges756 silver badges820 bronze badges

Comments

Phillip Kovalev · Accepted Answer · 2011-05-07 20:59:45Z

0

Use SecondAnimation.apply(this).

answered May 7, 2011 at 20:59

Phillip Kovalev

2,49723 silver badges23 bronze badges

Comments

Caspar Kleijne · Accepted Answer · 2011-05-07 21:20:46Z

this waiting can be done with 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 settings as paramaters from an array. So you reuse the function and only change the behaviour.

 // 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

Collectives™ on Stack Overflow

Passing an HTML Element into a Javascript Function

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related