0

I've created a jQuery mini script for slider. It's work perfectly in Firefox, Chrome, IE9 but when I hover in IE7, IE8. It's show an alert error (Undefined current_hover_item).

$('.nav-item').hover(function(){
        var current_hover_item = $(this).children().attr('rel');
        $('.show-item').hide();
        $(current_hover_item).fadeIn(1000);
        $(this).animate({"width": "+=10px", opacity: 0.6}, 500, function(){
             $(this).animate({"width": "-=10px", opacity: 1}, 500);
        });
}, function(){
        $(current_hover_item).fadeOut(1000);
        return false;
});

I tried remove (var) keywords but when I'm hover, it won't show everything. Please help me. Thanks.

Taz
  • 3,718
  • 2
  • 37
  • 59
Nguyen Trong Tan
  • 1

2 Answers2

2

current_hover_item is undefined in the second function, since the definition in the first function is in a closure.

You need to declare current_hover_item in both functions. Or, since you only use the variable once in each function, remove it entirely, like this:

$('.nav-item').hover(function(){
        $('.show-item').hide();
        $($(this).children().attr('rel')).fadeIn(1000);
        $(this).animate({"width": "+=10px", opacity: 0.6}, 500, function(){
             $(this).animate({"width": "-=10px", opacity: 1}, 500);
        });
}, function(){
        $($(this).children().attr('rel')).fadeOut(1000);
        return false;
});

Or preferably refactor your code.

Community
  • 1
  • 1
Chris Laplante
  • 29,338
  • 17
  • 103
  • 134
0

I was having this problem earlier today. I fixed it by declaring the variable outside of any jquery functions (including .ready()) and then set it where you need it (where you are currently declaring it).

Losbear
  • 3,255
  • 1
  • 32
  • 28