Question

I try to add click function but it doesn’t run…

$("#menu2 li").hover(function() { //On hover... 

    $(this).find("span").stop().animate({ 
        marginTop: "-40" //Find the span tag and move it up 40 pixels 
    }, 250); 

    $("#menu2 li").click(function() { //On click... 
        $(this).find("span").stop().animate({ 
            marginTop: "-40" //Find the span tag and move it up 40 pixels 
        }, 250); } 
        , function() { //On hover out... 
            $(this).find("span").stop().animate({ 
                marginTop: "0" //Move the span back to its original state (0px) 
            }, 250); 
        }); 
});

here is the link:after click, i hope it still be white color

Answer 1

Update: After seeing your link and reading the explanation, I would do it this way:

Create a CSS class selected:

.selected span {
    marginTop: "-40";
}

Add the class to the element on click and only perform the mouseleave action if the element is not selected:

$("#menu2 li").click(function() {
    if(!$(this).hasClass('selected')) {
        $(this).siblings('.selected').removeClass('selected').mouseleave();
        $(this).addClass('selected');
    }
}).hover(function() {
    $(this).find("span").stop().animate({ 
        marginTop: "-40" //Find the span tag and move it up 40 pixels 
    }, 250); 
}, function() {
    if(!$(this).hasClass('selected')) {
        $(this).find("span").stop().animate({ 
            marginTop: "0" //Move the span back to its original state (0px) 
        }, 250);
    }
});

I created a DEMO for you.

---

Old answer:

It should probably be:

function mouseEnterHandler {
    $(this).find("span").stop().animate({ 
        marginTop: "-40" //Find the span tag and move it up 40 pixels 
    }, 250); 
}

function mouseLeaveHandler() {
    $(this).find("span").stop().animate({ 
        marginTop: "0" //Move the span back to its original state (0px) 
    }, 250);
}

$("#menu2 li").click(mouseEnterHandler)
              .hover(mouseEnterHandler, mouseLeaveHandler);