JavaScript / JQuery事件处理程序问题

Question

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;
    }
}

Answer 1

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 .