Question

I have an element with id #contactblurb defined in HTML:

<div id="contactblurb" class="tab">
  email:  [e-mail]
</div>

And when the mouse hovers over another element (#contactNav), I want to hide some other elements and show this #contactblurb. I want to be able to do this with other elements, not just #contactblurb, so I created a function in jquery that takes ( what i thought was ) the element to hide:

var HideSlidesAndShowMe = function($elem)
{
  $('#slides').fadeOut('slow', function()
  { 
    $('#acorn').css({opacity : 0.05});

    $elem.show();
  });
}

I’m calling it via:

$("#contactNav").hover( function () {
                                   HideSlidesAndShowMe($("#contactblurb")) ;
                                 },
                                 function () 
                                 {
                                   // other stuff on exit hover.
                                 }
                    );

But it doesn’t show #contactblurb, it does do the other stuff however.

Is there something wrong with the way I’m passing the argument?

Answer 1

Working demo: http://jsfiddle.net/g9kBC/

This seems to be behaving fine check your html again and the closing brackets even with $ sign it should behave :)

code

var HideSlidesAndShowMe = function($elem) {
    //$('#slides').fadeOut('slow', function() {
      //  $('#acorn').css({
        //    opacity: 0.05
        //});
       alert($elem.attr('id'));
        $elem.show();
    }


$("#contactNav").hover(function() {
    alert('f');
    HideSlidesAndShowMe($("#contactblurb"));
}, function() {
    // other stuff on exit hover.
});​