jQuery hover only works one time

Question

I am fairly new to jQuery, but I feel like I have a pretty decent grasp on it. Or at least this part of it. I've been through quite a few tutorials on jQuery, but I've never run into this problem before.

I want to hover on an image and have it reveal a small paragraph beside it. I have written this jQuery that does exactly what I want it to do, except it only works once. Hovering over the image reveals the description paragraph, and moving outside the image hides it again, but then hovering won't do anything. Any ideas why this might be?

$(document).ready(function(){
    $('#novelDescrip').hide();
    $('#barDescrip').hide();

    $('.novel').hover(function(){
        $('#novelDescrip').fadeIn('slow', 1);
    },
    function(){$('#novelDescrip').hide();}
    );

    $('#barminder').hover(function(){
        $('#barDescrip').fadeIn('slow', 1);
    },
    function(){$('#barDescrip').hide();
    });

});

Use toggle() instead of fade in and hide. http://api.jquery.com/toggle/. I believe that the second argument in .fadein must be a function — Jorge Zuverza, Nov 22 '13 at 21:23
Using toggle() did the trick! It does work now. I'd still like to know why this only works one time, but if you put toggle() as an answer i'll click the checkmark for you @JorgeZuverza — zburns12, Nov 22 '13 at 21:37

score 0 · Accepted Answer · edited May 23 '17 at 12:19

This should explain the use of toggle as well as the link Jorge posted.

How do I check if an element is hidden in jQuery?

Here are a few methods to get you started with the jQuery toggle function:

 $('.click').click(function() {
    $('.target').toggle();
});

$('.click').click(function() {
    $('.target').slideToggle();
});

$('.click').click(function() {
    $('.target').fadeToggle();
});

The slide and fade are used to give the toggle a slide or fade out effect.

You can also use the following attributes for different things:

$('element:hidden')
$('element:visible')

Or you can do the same with is:

$(element).is(":hidden")    
$(element).is(":visible")

Answer to your question: since you didn't post your html I can't test anything for you, but I'd recommend following the tutorials stated above or changing hide() to show() at some parts of your code.

Hope that helps.

jQuery hover only works one time

1 Answers1