2

我正在尝试集成一个插件，这真是一场噩梦。

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

我正在使用翻转功能，如果我将鼠标悬停在一个元素上，它可以正常工作，等待几秒钟让翻转完成动画，然后移动我的光标。但是，如果我快速悬停，我的翻转会发生但完全混乱，并且您无法在多个元素之间快速移动鼠标。

我试过使用stop()无济于事所以想我会在这里问，我附上了一个小提琴，当看着我的小提琴时，快速在所有元素上运行你的鼠标，你会明白我的意思

http://jsfiddle.net/5JyVC/

$('.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');
4

2 回答 2

1

这与flipLock数据属性有关。如果鼠标悬停太快，并且不会发生还原翻转，flipLock则会true导致下一次鼠标悬停以错误的内容开始。所以从那时起，你就在相同的内容之间来回切换。

如果您删除 FlipLock 检测并return false添加stop到animation调用中flip，它将正确恢复。

虽然动画看起来有点不稳定，但我不确定可以做些什么。

这对我有用：http: //jsfiddle.net/5JyVC/5/如果你移动得足够快它仍然会搞砸，不知道为什么会这样，也许是多个鼠标悬停事件？这就是flipLock我猜测的原始意图。

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

于 2013-08-21T16:16:25.270 回答
0

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

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

无论如何，我修改了函数，以便您可以将HTMLElements 直接添加到添加需要翻转的各种 div 的函数中。

A＆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;

正如您所见，没有事件监听器或复杂代码，就像您使用 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 翻转，因此您可以在各种浏览器上触发硬件 GPU 加速。

html 只需要带有类的容器flip

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

<!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>

所以这很简单，你可以看到，但是从这个基础你可以创建非常令人印象深刻的动画，只是改变翻转 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>

想在点击/鼠标事件/拖动事件/滚动事件上触发动画吗？

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

并在 javascript on event

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

或者

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

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

像往常一样

  1. javascript 处理事件或添加多个元素

  2. css 创建页面的样式

  3. html 只是一个基本结构。

如有任何其他问题，请询问

小提琴（用铬测试）

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

于 2013-08-21T17:17:09.380 回答