Grow your CSS skills. Land your dream job.

javascript problem

  • # May 8, 2009 at 1:17 am

    Hey Guys i need a solution for the following problem

    i have a javascript file which i use to display a modal box using jQuery doing all the animation effects and stuff

    right after all the animation effects i have a javascript statement

    something like this

    Code:
    $(‘div#modal’).animate({left:w,top:h,width:modalW,height:modalH},”slow”);
    document.formName.submit();

    This is just an example……

    ma problem now is the the second statement executes before animation is completed
    is there any why i could finish the animation and then make the javascript to execute ???

    # May 8, 2009 at 5:36 am

    You can use the built-in callback function to achieve this. Animate takes a total of four arguments: animate( params, [duration], [easing], [callback] ). The most popular are the first two, ‘params’ and ‘duration’ (you’ve used these as well). You can add a callback function that will execute upon completion of your animation. So the new code would be like this:

    Code:
    $(‘div#modal’)
    .animate(
    {
    left : w,
    top : h,
    width : modalW,
    height : modalH
    },
    “slow”,
    function(){
    document.formName.submit();
    }
    );
    //duration, easing and callback are all optional,
    //so you can just leave out one and use another like I did above (‘easing’ was left out)

    That should do the trick. You might also want to have a look at jQuery thickbox, which is a very nice modal box plugin developed by Cody Lindley – member of the jQuery team.

    # May 8, 2009 at 6:06 am

    Thanks for the reply Hugo …i realised it minutes before i saw this reply……anyways i appreciate ur response….thanks

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".