Question

hey, Im trying to make a call a jquery function and pass some args with it in the form of

$('#button').mouseenter(exampleFunction(arg1,arg2));

function exampleFunction(arg1,arg2)

The function works fine with no args written like this.

$('#button').mouseenter(exampleFunction);

function exampleFunction;

but as soon as i add () to put args in the function stops working.

like this:

$('#button').mouseenter(exampleFunction());

It seems like this is some sort of jquery syntax error on my part

here’s the actual code

    <script type="text/javascript">

$(document).ready(function() {
$('.section').mouseover(function(){
  $('#nav2').fadeOut(0).animate({"height":"30px"}, 250);

         });


$('#section1').hover(navSelect);

function navSelect(){
  if ( $('.interior').is(':hidden')){
  $('.subSection').fadeOut(250);
  $('.interior').delay(250).fadeIn(250);
  $('#selector').animate({"left":"0px"},250);
  }}


$('#section2').mouseenter(function(){
  if ( $('.exterior').is(':hidden')){

  $('.subSection').fadeOut(250);
  $('.exterior').delay(250).fadeIn(250);
  $('#selector').animate({"left":"100px"},250);
  }
});
$('#section3').mouseenter(function(){
  if ( $('.view').is(':hidden')){

  $('.subSection').fadeOut(250);
  $('.view').delay(250).fadeIn(250);
  $('#selector').animate({"left":"200px"},250);
  }
});


         });
</script>

Answer 1

the function you bind to on an event in jQuery is passed the ‘event’ object from jQuery’s invocation of the method.


jQuery("#button").mouseenter(function(evt){[ do something ]});


if you want to do something like


$('#button').mouseenter(exampleFunction(arg1,arg2));


in order to templatize a function that you want to have bound to the event, you could construct a function like so:


function exampleFunction(arg1, arg2){
        return function(evt){
            jQuery(this).animate({width: arg1, height: arg2},250)
        };
}};


having it return the function that is bound (and thus, passed the event object),
and then bind it to elements like


jQuery("#button").mouseenter(exampleFunction("50%","50%"))
        .mouseleave(exampleFunction("100%","100%");