stopping animation after its done

[nofel]

hi,i am new to jquery and i been playing around and getting where i wanna be in getting the thing done bt i am stuck on one place. i want my code animation to stop after it reaches whts in hover and return to normal state when its out. but it keeps on playing in loop. here is my code

$(document).ready(
                function(){
                    $('#conatiner').hover(function(){
                        $('.caption').animate({'bottom':0},6000,"swing"),
                        //alert('its working');
                        $('.caption').animate({'bottom':-100},6000,"swing")
                    })
                }

also i am confused on what this keywords this mean in jQuery and do. please help me

[chris.upjohn]

Currently your JavaScript is almost where it needs to be, see the below to understand what I mean by that.

$(function() {
    $('#conatiner').hover(function() {
        $('.caption').stop(true).animate({bottom : 0}, 6000, 'swing');
    }. function() {
        $('.caption').stop(true).animate({bottom : -100}, 6000, 'swing');
    });
});

Let me explain what I have done, basically when you're using the hover method in jQuery and require 2 separate events to take place you always need to specify 2 functions as callbacks which in simple terms is "mouseenter" and "mouseleave". The above now runs the "mouseenter" when you hover over the #container element then runs the "mouseleave" which in turns runs the animations in sequence. Another alteration is the stop method which intercepts the current animation queue and stops any running animations on the current animation which allows for a much better experience as far as performance is concerned.

Also just as a quick overview the "this" keyword in jQuery normally just refers to the element object which is a native JavaScript object that contains no fancy jQuery alterations, see the below example:

$(window).on('resize', function() {
    // Referees to the native JavaScript object
    console.dir(this);
 
    // Referees to the jQuery wrapped object
    console.dir($(this));
});

Hope that helps explains it it simple terms.

[nofel]

Hi,
I tried ur code but its giving error on second callback function.perhaps, that's why its not working?

[chris.upjohn]

Sorry bud, there was a typo. Try the following:

$(function() {
    $('#conatiner').hover(function() {
        $('.caption').stop(true).animate({bottom : 0}, 6000, 'swing');
    }, function() {
        $('.caption').stop(true).animate({bottom : -100}, 6000, 'swing');
    });
});

[nofel]

thanks!, i was wondering why there is a dot instead of comma.but i didn't get the this keyword.sorry i m newbie,just started few days ago as i needed jquery.

[nofel]

I ask because, i will have more boxes like this to animate, can't go around making new functions for everyone. i think the this thing might be helpful or something else? perhaps guide me in a example which has 2 containers. if u can.
Thanks!

[chris.upjohn]

See the following demo i made, it should help explain what this is referring to.

http://jsfiddle.net/chrisupjohn/K2ABJ/

[nofel]

Hi!, sorry for late reply. well i see your example and i think this means that u point to current element that ur working on.right? perhaps if u can tell me in layman terms. if its possible

[chris.upjohn]

The demo I posted answers both you're question about the "this" keyword and the possibility of having more than one caption on the page at a time, I recommend you spend some time looking over the demo code as after a little bit things should start clicking.

If you're still confused let me know and I'll do my best to fill in the hard parts for you.