Animate div popup at mouse position

Question

I've never made a popup div and am trying to do so, however the code I've made, actually both attempts... doesn't throw any errors, but also doesn't seem to do anything. Am I going about this all wrong?

Here is what I got going on 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',
        });
    });

});

For starters this fails: `var parentElm = $(this),info = parentElm.find('.info');` because there's no element with the class of info that's a descendant of the span being clicked on. — j08691, Apr 18 '14 at 19:08
@adeneo Check the API. It says nothing about it's removal, and works in 2.x Edge. Lol — WASasquatch, Apr 18 '14 at 19:14
It was removed in jQuery 1.9 -> https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-jqueryfntogglehandler-handler-is-deprecated — adeneo, Apr 18 '14 at 19:16
Note that the version that accepts two callbacks is the one that is removed, there still is a toggle() that toggles visibility, but that's not used with two callbacks. — adeneo, Apr 18 '14 at 19:16
http://stackoverflow.com/questions/14301935/where-has-fn-toggle-handlereventobject-handlereventobject-gone — adeneo, Apr 18 '14 at 19:17
http://stackoverflow.com/questions/14338078/equivalent-of-deprecated-jquery-toggle-event — adeneo, Apr 18 '14 at 19:18
http://stackoverflow.com/questions/14490957/what-is-alternative-to-use-after-jquery-1-9-removed-togglefunction-function — adeneo, Apr 18 '14 at 19:18
http://stackoverflow.com/questions/17042647/jquery-toggle-requires-two-clicks-after-first-click?lq=1 — adeneo, Apr 18 '14 at 19:19
http://stackoverflow.com/questions/15900838/how-to-use-toggle-with-jquery-1-9?lq=1 — adeneo, Apr 18 '14 at 19:20
Let's not spam, and be rude and offensive please. One link to github was plenty enough. Reporting rest. — WASasquatch, Apr 18 '14 at 19:21
Sure, report away if you found my helpful links to answers that outline how to replace the deprecated and removed method rude and offensive. — adeneo, Apr 18 '14 at 19:24
No, continuing on with spam, and hammering away after only one link was necessary. That's called rude, and offensive. Lol — WASasquatch, Apr 18 '14 at 19:27

score 1 · Answer 1 · answered Apr 18 '14 at 19:27

Figured it out after being told that toggle() is only for toggling a block and not handles.

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

});

Animate div popup at mouse position

1 Answers1

JSFiddle Example