在鼠标位置动画div弹出窗口

Question

我从来没有做过弹出式div而且我试图这样做，但是我做的代码，实际上是两次尝试......都没有抛出任何错误，但似乎也没有做任何事情。我错了吗？

以下是 JSFiddle

的内容

var mX, mY;
$(document).mousemove(function (e) {
    mX = e.pageX;
    mY = e.pageY;
}).mouseover();


$('li span').click(function () {

    var parentElm = $(this),
        info = parentElm.find('.info');

    info.toggle(function () {
        $(this).css({
            'display': 'block',
            'opacity': '0.1'
        }).animate({
            'opacity': '1.0',
            'width': '300px',
            'height': '150px',
            'left': mX,
            'top': mY
        })
    },
    function () {
        $(this).animate({
            'opacity': '0',
            'width': '0',
            'height': '0',
        }).css({
            'display': 'none',
        });
    });

});

Answer 1

在被告知toggle（）仅用于切换块而不是句柄时想出来。

var mX, mY, isOn = false;
$(document).mousemove(function (e) {
    mX = e.pageX;
    mY = e.pageY;
}).mouseover();


$('li').click(function () {

    var parentElm = $(this),
        info = parentElm.find('.info');

    if ( isOn == false ) {
        info.css({
            'display': 'block',
            'opacity': '0.1'
        }).animate({
            'opacity': '1.0',
            'width': '300px',
            'height': '150px',
            'left': mX,
            'top': mY
        });
        isOn = true;
    } else {
        info.animate({
            'opacity': '0',
            'width': '0',
            'height': '0',
        }).css({
            'display': 'none',
        });
        isOn = false;
    }

});

JSFiddle Example