CODEWITHSUNDEEP
javascriptjquerycss
Nick Rameau
Nick Rameau

Reputation: 1318

How to do things to an element based on where the cursor comes from

I hope the question is clear enough, I want to do "things" to an element based on where the cursor comes from when hovering this element. For example, make the element slide to the right if the cursor comes from the left, to the left if the cursor comes from the right, to the top if it's coming from the bottom and to the bottom if it's coming from the top. I tried doing it on my own, it didn't go so well, so don't expect me to show anything of my own, sorry. But I have an example for you: http://pixelentity.com/

So, please, tell me a way to do that using jQuery and/or CSS3

Upvotes: 0

Views: 50

Answers (2)

Boris Zagoruiko
Boris Zagoruiko

Reputation: 13174

You can get the direction of mouse move at the moment of it entrance to block. Look at the example http://jsfiddle.net/PNsd5/2/

Function that get mouse direction depends from variables in the top of code represented at jsfiddle and looks like that:

function getMoveDir(){
    var direction = '';
    if ((disX <= 0) && (disY <= 0)){
        if (disX < disY) {
            direction = 'From right';
        } else {
            direction = 'From top';
        }
    }
    if ((disX >= 0) && (disY >= 0)) {
        if (disY > disX) {
            direction = 'from bottom';
        } else {
            direction = 'from left'
        }
    }
    return direction;
}

Upvotes: 1

theshadowmonkey
theshadowmonkey

Reputation: 679

Use the jquery mouseenter event.

The code you currently shows does different animations based on the mouseenter position and then calculating the offset. So, you can try calculating the position of the mouseenter and then decide where the cursor came from.

Then you can decide anyway to animate the picture.

Your helper functions here should be mouseenter, offset, animate. Please let me know if you want more help.

Upvotes: 0

Related Questions