jQuery hover fade problems

Question

Hi can someone please explain what I am doing incorrectly. I am trying to have an image (bub1) fade in when you mouseover a link (butt1) and fade back out when you mouse away. Thanks for any help.

I updated this based on the help here and added my html...

    <a href="#" class="butt1"><img src="images/button-1.png" alt="" class="home-butt-1"/></a>

<div class="bub1"><img src="images/bubble-bl.png" alt="" /></div>

    <script type="text/javascript">

$(function() {
    $('.bub1').hide();
    $('a.butt1').hover(function() {
        $(this).find('.bub1').fadeIn('fast');
    }, function () {
        $(this).find('.bub1').fadeOut('fast');
    });
});

</script>

Answer 1

Your syntax is wrong, it should be:

$(function() {
    $('a.bub1').hide();
    $('a.butt1').hover(function() {
        $('.bub1', this).fadeIn('fast');
    }, function () {
        $('.bub1', this).fadeOut('fast');
    });
});

Your error is "$(this).('.bub1')", when you want to select an element inside of another one, the syntax in $('.selector', '.parent_selector') or $('.selector', parentjQueryobj).

Answer 2

How about:

$(function() {
    var bub1 = $('.bub1').hide();
    $('a.butt1').hover(function() {
        bub1.fadeIn('fast');
    }, function () {
        bub1.fadeOut('fast');
    });
});