Question

我有一个绝对的噩梦，插件我试图整合。

我试图让我的页面上的X元素在悬停时翻转，然后在mouseout上恢复。

我正在使用翻转功能，如果我将鼠标悬停在一个元素上，等待几秒钟让翻转动画进行动画制作，然后移动光标，它就能正常工作。但是，如果我快速盘旋，我的翻转会发生，但完全混乱，你不能快速将鼠标移动到多个元素上。

我尝试使用stop()无济于事，所以我想在这里问，我附上一个小提琴，看着我的小提琴，快速地将鼠标移过所有元素，你会看到什么我的意思是

$('.sec-con').prepend('<div class="target" style="width:100%; height:100%; z-index:999999; cursor:pointer;top:0; left:0; display:block; position:absolute; "></div>');
$('body').on({
    mouseenter: 
    function () {
        $(this).stop(true, true).next('.sector').flip({
            direction:'rl',
            color:'#2d6995',
            speed: 200,
            content:'<span class="all-vacancies">View all Vacancies <br />in this sector.</span><span class="read-more">Click here to read more.</span>'
        });
    },
    mouseleave: function () {
        $(this).next('.sector').revertFlip();
    }
}, '.target');

Answer 1

这与flipLock数据属性有关。如果你过早地鼠标移除flipLock是true并且恢复翻转不会发生，导致下一次鼠标悬停以错误的内容开始。所以从那时起你就会在相同的内容之间来回翻转。

如果您移除了flipLock检测并return false并将stop添加到animation中的flip来电，它将会正常还原。

动画看起来有点不稳定，我不知道该怎么办。

这对我有用：http://jsfiddle.net/5JyVC/5/如果你移动得足够快，它仍然会搞乱，不知道为什么会这样，可能是多个鼠标悬停事件？这就是原始flipLock旨在阻止我猜测的内容。

也许flipLock应该更复杂，翻转时，只允许翻转，反之亦然。 flip和revertFlip的当前实现虽然不允许这样做。

Answer 2

这是纯css的另一种方式（根据要求）

javascript只是为了更快地添加元素

无论如何，我修改了这个函数，你可以直接添加HTMLElement直接添加需要翻转的各种div的函数。

A＆amp; B，其中A是前面而B是后面。

在这个例子中，我向页面添加了6个元素。

这是测试元素的javascript

var D,
flip=function(A,B){// HTMLElement,HTMLElement - no text
 var box=D.createElement('div');
 box.appendChild(D.createElement('div')).appendChild(A);
 box.appendChild(D.createElement('div')).appendChild(B);
 return box;
},
init=function(){
 D=window.document;
 for(var i=0,f=D.createDocumentFragment();i<6;i++){
  var a=D.createTextNode('Front '+i),
  b=D.createTextNode('Back '+i);
  f.appendChild(flip(a,b));
 }
 D.getElementsByClassName('flip')[0].appendChild(f);
}
window.onload=init;

你可以看到没有eventlisteners或复杂的代码，就像你使用css3一样，你完全可以将:hover放在div上，而不需要javascript（mouseenter，mouseleave）。

将此动画添加到每个元素我为元素的容器添加了一个类。

html,body{width:100%;height:100%;margin:0;padding:0;} /* important */
.flip{
 width:100%;height:100%; /* in this case the perspective center */
 -webkit-perspective:1200; /* is in the page center */
}
.flip>div{
 width:200px;height:160px; /* width && height of the flip box */
 float:left; 
 margin:16px;
 -webkit-transform-style:preserve-3d;
 -webkit-transition:all 600ms ease;/* animation speed is 600ms */
}
.flip>div>div{
 width:100%;height:100%; /*to fit the flip container*/
 -webkit-backface-visibility:hidden;/* hide the back side */
 line-height:160px;text-align:center;/*center the text*/ 
 background-color:grey;/* both sides color */
}
.flip>div>:nth-child(2){
 -webkit-transform:rotateY(180deg);
 margin-top:-160px;/* hack so no need for position absolute*/
}
.flip>div:hover{
 /*-webkit-transition:all 1000ms ease 1000ms; 
  want to close it slowly with a delay? */
 -webkit-transform:rotateY(180deg);
}
/* no position relative or absolute which slows down ios */

这是为webkit浏览器编写的（chrom，safari，android，ios）我为我的ipad做了。

将它与firefox以及支持css3的最新ie一起使用，你需要使用-moz，-ms，-o前缀复制这个-webkit样式并检查支持。

此示例基于3d，因此容器也具有透视值。并且元素在真实的3d中翻转，因此您可以在各种浏览器上触发HW GPU加速。

html只需要具有类flip

的容器

使用class允许您添加多个具有多个翻转元素的容器。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flip</title>
//add here the links to css3 or the <style>
//add here the the script or link to the script  
</head>
<body><div class="flip"></div></body>
</html>

所以这很简单，你可以看到，但是从这个基础你可以创建veri令人印象深刻的动画，只需改变翻转css。

如果您需要更高级的功能，可以使用javascript事件处理

transitionend

如果你想手动添加这些盒子，这就是你需要写的全部内容。

<div class="flip">
 <div>
  <div>Element1 Front</div>
  <div>Element1 Back</div>
 </div>
 <div>
  <div>Element2 Front</div>
  <div>Element2 Back</div>
 </div>
</div>

想在 click / mouseevent / dragevent / scrollevent 上触发动画吗？

将.flip>div:hover替换为.flip>div.flipped

和javascript on event

this.parentNode.classList.toggle('flipped')

或

this.parentNode.classList.add('flipped') & this.classList.remove('flipped')

现在这一切都是关于现代浏览器并使用现代的javascript＆amp;＆amp; css3，但是当你想翻转某些东西时，无论如何你需要一个现代浏览器。 jQuery也无法在ie6

中翻页

总是

javascript处理事件或添加多个元素
css创建页面样式
html仅用于基本结构。

任何其他问题只需询问

小提琴（用铬测试）

http://jsfiddle.net/gNB3z/2/

Mouseenter和Mouseleave给出了不希望的结果

2 个答案: