SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    stopping animation after its done

    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
    Code JavaScript:
    $(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
    All those who wander aren't lost.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Currently your JavaScript is almost where it needs to be, see the below to understand what I mean by that.

    Code JavaScript:
    $(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:

    Code JavaScript:
    $(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.

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I tried ur code but its giving error on second callback function.perhaps, that's why its not working?
    All those who wander aren't lost.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Sorry bud, there was a typo. Try the following:

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

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    All those who wander aren't lost.

  6. #6
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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!
    All those who wander aren't lost.

  7. #7
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    See the following demo i made, it should help explain what this is referring to.

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

  8. #8
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    All those who wander aren't lost.

  9. #9
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •