Question

I am animating a div called $(‘.plan’). I want to grab its originalWidth in a variable and NOT have this value change after hover animation so I can return to it after the animation has completed.

$(document).ready(function() {

    var $plan = $('.plan'),
    origWidth = $plan.width();

    $plan.hover(function() {
        $this = $(this);
        $this.stop().animate({width: 200, backgroundColor:'#a4a4a4'}, 500)      
    }, function() {
        $this.stop().animate({width: origWidth, backgroundColor:'#e2e2e2'}, 200)
    });

});

How do I do this?

Hey it seems like its working now. How come?

Answer 1

$(function() {

    var $plan     = $('.plan'),
        origWidth = $plan.width();

    $plan.hover(function() {
        $(this).stop().animate({width: 200, backgroundColor:'#a4a4a4'}, 500)      
    }, function() {
        $(this).stop().animate({width: origWidth, backgroundColor:'#e2e2e2'}, 200)
    });

});

Here is a demo: http://jsfiddle.net/Dc367/

All that I really changed are the $this references, you don’t really need to cache a selection if you aren’t going to use it more than once. And you didn’t declare a $this variable in the second .hover() function so I’ll assume that’s where your code broke.