How to combine click with hover function in same status? [closed]
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
I think you are talking about binding both the hover and click together. Try this:
$('#menu2 li').bind('click hover', function(){
// do stuff
});
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);
精彩评论