nnattawat / flip

A lightweight jQuery plugin to make 3D card flipping animation
Other
624 stars 312 forks source link

Request: delay mouseleave flip #45

Closed tohvanah closed 9 years ago

tohvanah commented 9 years ago

Does anyone have a suggestion on implementing a delay when using hover on the Unflip? Once the mouse exits I'd like there to be a delay before the element unflips. Increasing the effect speed isn't what I'm after.

Thanks for the actively developed plugin!

Download commented 9 years ago

Here is the code that handles mouse enter/leave (line 192 and further) in flip.js:

var performFlip = function() {
  $dom.unbind('mouseleave', performUnflip);  // temporarily unbind mouseleave handler

  flip($dom);                                // start flipping

  setTimeout(function() {                    // after speed + 150ms...
    $dom.bind('mouseleave', performUnflip);  // re-bind mouseleave handler
    if (!$dom.is(":hover")) {                // unflip if mouse had already left
      unflip($dom);
    }
  }, (settings.speed + 150));
};

var performUnflip = function() {              //  <--- your changes would probably go here
  unflip($dom);
};

$dom.mouseenter(performFlip);
$dom.mouseleave(performUnflip);

When the mouse enters the flippable content, performFlip gets called. In it we temporarily disable the mouseleave handler to prevent weird flickering effects, because the flip animation may cause the mouse to leave, which would cause it to flip back, causing the mouse to enter again etc. So we disable it to approximately 150ms after the flip animation has ended.

Looking at the code for performUnflip, it's much simpler and just immediately performs the unflip. Maybe, you could make a change here to add a delay using setTimeout just like it's already doing in performFlip. You could add a setting to the settings object, much like the current speed setting, that would affect the delay. Possibly also replace the hardcoded 150 in performFlip with a similar setting. mouseEnterDelay and mouseLeaveDelay perhaps?

I would recommend you to fork this repository, clone the project to your local machine, create a branch (e.g issue-45 or experimental or something) and just write some code. Commit and push to GitHub and we can discuss it.

Download commented 9 years ago

Closing this because of lack of activity. @tohvanah Feel free to re-open if you still have something to add to this.