JQuery翻轉插件和動畫排隊問題

我的網站上有一系列瓷磚http://zhickman.com/。理想情況下，當您將鼠標滑動到所有拼貼塊上時，我希望拼貼塊自行翻轉和恢復。我遇到了一些問題，使用懸停事件時，滑過瓦片只會讓它們翻轉一次。然後，當單獨懸停在瓦片上時，懸停事件會隨着翻頁動畫一遍又一遍地發生，而不是保持靜止。所以，我添加了一個布爾值，直到調用懸停的handlerOut才被翻轉。這在單獨使用拼貼時有效，但如果在動畫完成之前將鼠標移出，則拼貼保持不變。JQuery翻轉插件和動畫排隊問題

我想使用排隊，但在使用全局fx隊列時，添加平鋪翻轉和迴轉翻動畫會導致平鋪等待其他平鋪完成其動畫。

我用停止部分功能：

var test = false; 
    $(document).ready(function() { 
     $(".box").hover(function(){ 
      if (test == false) { 
       $(this).stop(false, true).flip({speed: 350, direction:'lr', color:'#c5cac6', content:$(this).children('.info').text()}) 
       test = true; 
      } 
     }, function(){ 
      $(this).stop(false, true).revertFlip(); 
      test = false; 
     }); 
    });

但是，這打破了原來的翻轉動畫鏈接的網站上所看到。

我的問題是：

1）我可以用動畫排隊這個，有什麼做的正確方法？ 2）有更容易的選擇（我只是使用不正確的停止）？

來源

2014-04-16 ಠ_ಠ

你考慮過css動畫嗎？這將避免任何JavaScript的需要。你會接受基於CSS動畫的答案嗎？ –

我查看了CSS動畫（http://davidwalsh.name/css-flip），但它引起了我現有的CSS問題，它給出了動態調整大小的框。如果您可以提出一個解決方案，與我現在擁有的調整功能很好地匹配，那麼是的，那將是完全可以接受的！ –

@ಠ_ಠ如果可能，可以發佈包含'html'，'css'，'js'？謝謝 – guest271314

您使用的插件似乎不適用任何CSS樣式，它附加了一些div元素，我認爲這些元素真的是一團糟。

我已經在一個CSS方法中實現了你的CSS和HTML。

我的主要目標是儘可能減少附加的樣式和元素。因此，在演示中，您必須取消嵌套.info和.box元素，並用.flipper div對它們進行包裝。

你的塊結構看起來像這樣

<a href="resume.pdf"> 
     <div class="flipbox-container"> 
       <div class="flipper"> 
       <div class="box resume"><span class="box-header">Résumé</span><br /><br /> 

       </div> 
       <div id="resume-info" class="info"> 
         My current résumé. Contains technical skills, employment history, and education history. 
        </div> 
       </div> 

      </div> 
     </a>

看看我做了http://jsfiddle.net/NSUq5/1/

請記住，我沒有改變任何原始的風格完整的功能演示。生成動畫的代碼位於CSS面板的最底部。

來源

2014-04-26 13:17:05 Theodore

有一個onBefore回調，你應該可以用來停止任何以前的動畫。

像這樣：

$(this).flip({ 
    speed: 350, 
    direction:'lr', 
    color:'#c5cac6', 
    content:$(this).children('.info').text(), 
    onBefore: function(){ 
     /* 
      do stop here--> 
      $(this).stop(args); 
     */ 
    }, 
});

你與你的test布爾做什麼能更好地工作，如果你在插件的onAnimating和onEnd回調函數設置。

來源

2014-04-20 17:08:36

JQuery翻轉插件和動畫排隊問題

回答

相關問題