Question

I have this code:

$('#services_list > div').hover(function() {

    var serviceHoveredOn = '#' + $(this).attr('id');
    $(serviceHoveredOn + ' .service_expand').stop().animate({'width': '169px'}, 150);

},

function() {

    $(serviceHoveredOn + ' .service_expand').stop().animate({'width': '159px'}, 150);

});

But, serviceHoveredOn is not defined when I hover outside of my div. I searched and found this:
jquery: passing variables in hover() function?
But I am not sure how I can use toggle() to solve my problem. Thank you.

Answer 1

You cannot access variables declared in another function.

---

In your case, you don’t even need it. Just use this, and pass it as a context:

$('#services_list > div').hover(function() {
    $('.service_expand', this).stop().animate({'width': '169px'}, 150);
},
function() {
    $('.service_expand', this).stop().animate({'width': '159px'}, 150);
});