JavaScript/JQuery event handler problem
Been playing around a bit with JavaScript/JQuery, and made a "shy" button, instead its just a p-tag with a word. It works ok, except the bool goDown doesn't seem to change, so it always goes down. What's wrong with my code?
Also JavaScript debugging in VS2010 doesn't seem to be working very good, is this a known problem?
Thanks in advance!
if (typeof naarBeneden == 'undefined') {
var goDown = new Boolean(true);
}
$(document).ready(function () {
$(".moveme").animate({ "left": "+=500px"
}, 2000);
$(".moveme").hover(move());
});
function move() {
if (goDown) {
$(".moveme").hover(function () {
$(this).animate({ "top": "+=50px" }, 0)
});
goDown = false;
}
else {
$(".moveme").hover(function () {
$(this).animate({ "top": "-=50px" }, 0)
});
开发者_如何学运维 goDown = true;
}
}
The main issue is here:
$(".moveme").hover(move());
You're calling move()
not using move
as a handler, you need it without the parenthesis, like this:
$(".moveme").hover(move);
Even doing that though, you're assigning a new .hover()
handler on each hover
event, and I doubt that's really what you're after. It's hard to tell exactly what you're after, but I think this is it:
$(function () {
var goDown = typeof naarBeneden != 'undefined';
$(".moveme").animate({ "left": "+=500px" }, 2000);
.hover(function () {
$(this).animate({ "top": goDown ? "+=50px" : "-=50px" }, 0);
}, function() {
$(this).animate({ "top": !goDown ? "+=50px" : "-=50px" }, 0);
});
});
This assigns an up then down animation if goDown
is true
when you hover/leave the element, and it does the reverse if goDown
is false
.
精彩评论