Search code examples
jqueryjquery-animatejquery-callback

jQuery animate div, fade in paragraph (callbacks)

Brad here, I'm a jQuery newbie. I've searched all over Google, W3Schools, and StackOverflow. Cannot find the solution specific enough to my issues.

Heres the problem, 

$("#picbox.maria").mousedown(function(){
    $("#picbox.maria").animate({
        width:"120px",
        right:"187px",
    });
$(".mariaP").fadeIn('fast');`

Basically what happens is, the <div> animates perfectly, but the paragraph fades in too soon, causing weird effects.

I know that I should be using callbacks, but I cant find a way to write it up. This is for a school project, but my teacher doesn't know jQuery :P

You can view the site im working on at http://alternativeenergyhome.us (About Us > Our Team)

Thanks for any advice/information!

Solution

  • See here i just added a anonymous(for you) parameter 400, basically that will permit you to decide the speed of the animation, by default it is 400 and you can adjust it according to your requirement.

    You can use callbacks like,

    $("#picbox.maria").mousedown(function(){
    $("#picbox.maria").animate({
        width:"120px",
        right:"187px",
    },400,function(){ $(".mariaP").fadeIn('fast');  });