2

I have an en event object that I want to increase a property's value. The following code does not seem to change the properties value.

var e = jQuery.Event('mousemove');
e.pageX = jQuery(window).width() / 2;
jQuery(e).animate({pageX: 1000},
    {
        step: function(){
            console.log(this.pageX);
            jQuery('.mouseover').trigger(this);
        },
        duration: 5000,
        easing: 'linear'
    }
);

Any ideas please?

Update @dfsq created a fiddle and the animate function does seem to run. I don't know why this does not run in my script, and no errors are being thrown. –

Nate
  • 919
  • 2
  • 9
  • 18
  • You can only animate DOM elements, not the position of the mouse cursor. What you are trying to do is not possible. – Rory McCrossan Feb 27 '15 at 15:06
  • 1
    Anything is possible –  Feb 27 '15 at 15:06
  • @Alex this would be the exception that proves it ;) http://stackoverflow.com/questions/4752501/move-the-mouse-pointer-to-a-specific-position – Rory McCrossan Feb 27 '15 at 15:07
  • MouseEvent object is read-only so changing it's properties has no effect. – Michael Miriti Feb 27 '15 at 15:08
  • @RoryMcCrossan I can set the value of e.pageX and use the event object to trigger the event. It just doesn't seem to run the animate function... – Nate Feb 27 '15 at 15:09
  • 1
    @RoryMcCrossan What OP is trying to do is perfectly valid and reasonable. It's not visual animation though, but object property "animation". – dfsq Feb 27 '15 at 15:09
  • 1
    You code seems to work fine? http://jsfiddle.net/9bxpLpar/ – dfsq Feb 27 '15 at 15:10
  • @dfsq that's right, but it's trying to move the mouse cursor. I don't see how you've come to the conclusion that this work? It's certainly not here in Chrome on OSX. – Rory McCrossan Feb 27 '15 at 15:11
  • @MichaelMiriti I can set the value of the e.pageX so has write access – Nate Feb 27 '15 at 15:12
  • @dfsq That is so strange, it doesn't work in my script but it does in the fiddle. No other js errors are being thrown as far as I can tell. – Nate Feb 27 '15 at 15:15
  • Even if the animation was working, it's hard to see what `jQuery('.mouseover').trigger(this);` might be trying to achieve. – Roamer-1888 Feb 27 '15 at 15:16
  • 1
    @RoryMcCrossan it doesn't try to move the cursor, it tries to fire an event on the `.mouseover` element and specify the position it occured. (*perhaps an auto-drawing app for example*) – Gabriele Petrioli Feb 27 '15 at 15:16
  • @Roamer-1888 I have a mousemove event handler that I need to set the value of the mouse position property (not the actual mouse/cursor position) occasionally. – Nate Feb 27 '15 at 15:17
  • But the signature of .trigger is `.trigger( eventType [, extraParameters ] )` or `.trigger( event [, extraParameters ] )`. Your `this` doesn't fit either signature. – Roamer-1888 Feb 27 '15 at 15:20
  • @Roamer-1888 `this` would refer to the event object being worked on (as far as I'm aware). My main issue is that the property value is not being increased and `console.log` is not being called. @dfsq fiddle works though so I have no idea what the problem is... – Nate Feb 27 '15 at 15:22
  • @Nate ofcource you can change these values but it has no effect besides assigning these valuse. If you want to trigger mouseover events then you should use `.trigger` as @Roamer-1888 suggested – Michael Miriti Feb 27 '15 at 15:25
  • Yes, precisely, `this` is set to the DOM element being animated. – Roamer-1888 Feb 27 '15 at 15:25
  • @Roamer-1888 its not a DOM element being animated. Its an object property, and using this object to trigger the mouse event does work, and the event handler does pick up the amended object values. – Nate Feb 27 '15 at 15:28
  • @Nate, maybe you're right. I'm having trouble visualising animation of something other than a DOM element. – Roamer-1888 Feb 27 '15 at 15:38

1 Answers1

2

Not sure if this has to do with the version of the jQuery (as it works on the fiddle but not if i change the jquery version)

You could alter it a bit to work on a simple object

var e = jQuery.Event('mousemove');
e.pageX = jQuery(window).width() / 2;

jQuery({pageX:e.pageX}).animate({pageX: 1000},
    {
        step: function(){
            console.log(this.pageX);
            e.pageX = this.pageX;
            jQuery('.mouseover').trigger(e);
        },
        duration: 5000,
        easing: 'linear'
    }
);
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317