I have a javascript function doing some animation and its parameter is a parent selector.
function myFunction(a)
{
$("'"+a+">#one'").stop(true, true).animate({left:'30px'},1100);
$("'"+a+">#two'").stop(true, true).animate({left:'30px'},1100);
}
and the following line is calling that function.
$("#main").mouseleave(myFunction("#main"));
but this is not working, can anyone tell me whats wrong in my code ?
A couple of issues there:
Just do the string substitution in your head. If you're passing #main into your function, then your selectors end up looking like this:
$("'#main>#one'")...
Note the ' characters in there. Now, if you remove the ' characters, you'll get:
$("#main>#one")...
...which means "the element with the id "one" that's a child of the element with the id "main". That now works, but it suggests you're using the same id ("one") for more than one element. You cannot do that in HTML.
Your id="one" and id="two" elements should probably have class="one" and class="two" instead, and if so your code should look like this:
function myFunction(a)
{
$(a+">.one").stop(true, true).animate({left:'30px'},1100);
$(a+">.two").stop(true, true).animate({left:'30px'},1100);
}
In your code calling myFunction:
$("#main").mouseleave(myFunction("#main")); // <== Wrong
...you're calling myFunction immediately and passing its return value into mouseleave. Since it has no explicit return value, you end up assing undefined into mouseleave, which won't do anything useful.
If your goal is to have myFunction called when the mouseleave event occurs, you pass in a function reference:
$("#main").mouseleave(function() {
myFunction("#main");
});
It may be worth stepping back from your current task and working through a few basic jQuery (and JavaScript) tutorials, to cement your understanding some of these concepts like ids being unique, passing functions as event handlers, string concatenation, etc.
The mouseLeave function takes a function as a parameter. You're passing in an executed function (one with parameters) so the result of your function is being passed as the parameter to mouseLeave (rather than the function itself).
You need to wrap it another function that would call your myFunction function in a new anonymous function.
Assuming the myFunction piece is correct then you need something like this:
$("#main").mouseleave(new function() {
myFunction("#main");
});
The selector is being concatenated incorrectly. The jquery function takes a String for the selector argument, there is no need to wrap it in single quotes.
function myFunction(a)
{
$(a+">#one").stop(true, true).animate({left:'30px'},1100);
$(a+">#two").stop(true, true).animate({left:'30px'},1100);
}
http://jsbin.com/ifunof/1/edit
function myFunction(a){
$(a+">#one").stop().animate({left:30},1100); // <-- fixed selectors
$(a+">#two").stop().animate({left:30},1100);
}
$("#main").mouseleave(function(){ // <-- (immediate call: Wrong)
myFunction("#main"); // <-- fn reference: OK!
});
Try this -
$(a+" > #one").stop(true, true).animate({left:'30px'},1100);
$(a+" > #two").stop(true, true).animate({left:'30px'},1100);
Well, there are two things wrong in your code:
Your selector becomes "'#main>#one'". This will not select anything. You probably want to omit the apostrophes:
$(a+" > #one")…
But since ids are unique in a document, you won't need the #main prefix anyway. Just use the ids directly:
$("#one, #two").stop(true, true).animate({left:'30px'},1100);
You are calling the function directly (and passing its result, undefined, to the mouseleave method), instead of adding it as an event handler. Instead, use
$("#main").mouseleave(function(e) {
myFunction("#main");
});
