要顯示，雖然動畫和動畫和隱藏

工作懸停的圖像上的任務，我必須旋轉圖像，然後一旦圖像旋轉完成我必須動畫另一個對象，然後在鼠標出旋轉初始圖像在其原始位置，然後第二個對象應該朝着它的初始位置動畫，然後隱藏。要顯示，雖然動畫和動畫和隱藏

每件事情都完成了，但唯一的問題是動畫顯示對象和鼠標移出隱藏對象。

加工DEMO這裏。

使用的JavaScript是

function rotate(degree,el,direction) { 
      var interval = null, 
      counter = 0; 
      interval = setInterval(function(){ 
      if (direction == "anti_clockwise" ? counter >= degree : counter <= degree) { 
       console.log(counter); 
       el.css({ 
       MozTransform: 'rotate(-' + counter + 'deg)', 
       WebkitTransform: 'rotate(' + counter + 'deg)', 
       transform: 'rotate(' + counter + 'deg)' 
       }); 
       if(direction == "anti_clockwise"){ 
       counter = counter - 1; 
       }else if(direction == "clockwise"){ 
       counter = counter + 1; 
       } 
      } 
      if (counter == degree && direction == "anti_clockwise") { 
       clearInterval(interval); 
       $("#prodShareIconDetails ul").animate({"left":"39px"},"slow"); 
      } 
      if (counter == degree && direction == "clockwise") { 
       clearInterval(interval); 
       $("#prodShareIconDetails ul").animate({"left":"200px"},"slow", function(){ 

       }); 
      } 
      }, 10); 
     } 
     $("#prodShareIcon").mouseover(function() { 
     rotate(-39,$(this),"anti_clockwise"); 
     }).mouseout(function() { 
     console.log(1); 
     rotate(39,$(this),"clockwise"); 
     });

有人可以幫助我理解我在哪裏做錯了嗎？

最初元素與編號prodShareIconDetails應隱藏，然後顯示懸停。

來源

2013-06-12 Soarabh

這不是一個微不足道的問題。我的猜測是，在懸停時，您希望圖標旋轉，完成該動畫後，該條開始向外擴展。每當鼠標離開時，整個過程以相同的順序展開。目前，如果你離開早期或中期動畫，有時會非常糟糕，有時會以完全破碎的狀態結束。

如果我是你，我會將你的動畫分爲不同的功能。 1）旋轉2）延伸，3）不旋轉，4）縮回。接下來，通過回調將它們串聯在一起，以便當完成時調用另一個，但使用CSS轉換它會稍微困難一些，因爲它是基於事件的。 jQuery transit插件非常適合簡化。旋轉完成後，它將調用extend。當鼠標出現時，它將停止所有動畫，並根據其得到的距離縮回和放鬆。

關於顯示酒吧，你實際上希望酒吧可見（所以用戶可以看到它擴展）。爲了達到這個目的，把酒吧放在另一個div裏面，這個div會作爲一個類似於overflow: hidden; position: relative;的窗口。然後放置position: absolute;條，以便當它不應該可見時，它位於我們「窗口」的可見空間之外。這個「窗口」和「軌道」方法在做滑動動畫時很常見。一個例子是Hulu，查看頁面中間的「流行節目」和其他滑塊。

來源

2013-06-12 08:52:50 Nucleon

固定DEMO IS HERE

TRICK WRAPPER寬度0和移動元素在右

#prodShareIconDetails{ 
width: 0px; 
position: absolute; 
top: -16px; 
right: 10px; 
z-index:10; 
overflow:hidden; 
}

來源

2013-06-12 12:00:02 Soarabh

大聲笑，移動鼠標進出元素的迅速，你會發現在滑塊反彈在你停下來之後就像一隻青蛙舌頭一樣出來。我不知道如果我打電話給那個'固定'，但如果它符合你的任務目標，那麼我很高興你找到了你的答案。 – Nucleon

雅是一個問題，我正在努力解決它。順便說一句，謝謝:) – Soarabh

要顯示，雖然動畫和動畫和隱藏

回答

相關問題