passing args when calling jquery function

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 difference between funktion and funktion() is one is a pointer to a function and the other is the result of function execution.

try

 mouseenter(function(a,b){....})

there you are defining the function and passing it in. The function defined takes 2 args, a and b.

Answer 2

Functions in JavaScript are first-class objects. You can put them in variables, return them from other functions, etc. When you write $('#button').mouseenter(exampleFunction(arg1,arg2));, you are saying "Run exampleFunction with these arguments, and use its return value as a callback".

To get jQuery to call the function with those arguments later, you can use an anonymous inline function:

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

Your no-argument function will get called, and pass the right arguments to the function you actually want to call. It's sort of a poor-man's closure.

Answer 3

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%");

Answer 4

I believe there's a jQuery plugin for that.
Look here: http://plugins.jquery.com/