JQuery背景動畫 - 這是正確的做法嗎？

我試圖讓一個菜單的背景取決於菜單LI動畫JQuery背景動畫 - 這是正確的做法嗎？

$(function() { 
    $('.top-nav ul li').mouseenter(function() { 
     var position = $(this).position() 
     $(this).parent().animate({ 
      'backgroundPosition': position.left}, {duration: 150}) 
    }) 
    .mouseout(function() { 
     $(this).parent().animate({}) 
    }) 
});

似乎工作，但有什麼感覺了約jQuery的，但我沒有任何jQuery的經驗，並希望一些輸入。

如果我使用.hover或取出.mouseout部分，動畫會變得跳躍和波濤洶涌。

有沒有更好的方法來獲得結果？或者是我的邏輯有點不同，因爲我不明白爲什麼我需要空的鼠標來使它順利運行。

來源

2012-11-21 Ionko Gueorguiev

你在幾個地方缺少分號。你也不需要'{duration：150}'，只需'150'就可以在沒有花括號的情況下自己完成。在第二個'animate（）'函數中不需要空{'}。 – diggersworld

非常感謝。我把它清理了一下，但我不確定半列應該放在哪裏。我假設一個會在位置變量之後？我還是有點難住，爲什麼沒有鼠標或懸停就無法工作。我想這不重要，因爲它正在工作我只想在進入新庫時學習正確的做法。 –

添加了一個答案，因爲它更容易顯示分號。 – diggersworld

那麼爲什麼它得到的原因，所有跳動和震盪是因爲在同一個分子發射的多個動畫的事件，所以它將它們全部排隊並逐一運行。

你可以做的是開始另一個動畫，這樣使用前.stop()功能：

$(function() { 
    $('.top-nav ul li').mouseenter(function() { 
     var position = $(this).position(); 
     $(this).parent().stop().animate({'backgroundPosition': position.left}, 150); 
    }); 
});

工作演示在這裏：http://jsfiddle.net/pulkitm/d9LHV/71/

希望這有助於！

來源

2012-11-21 20:55:17

是的！這現在有道理。我沒有想到.stop，而是用mouseout結束了這個功能。我知道有些東西不適合，但不能把我的手指放在上面。非常感謝這正是我正在尋找的！ –

當然不是。只需點擊右邊的綠色複選標記，對不對？ –

是的，你檢查了它。太好了！ :) –

我構建它像這樣（包括分號）：

$(function() { 
    $('.top-nav ul li').mouseenter(function() { 
     var position = $(this).position(); 
     $(this).parent().animate({ 
      'backgroundPosition': position.left 
     }, 150); 
    }) 
    .mouseout(function() { 
     $(this).parent().animate(); 
    }) 
});

來源

2012-11-21 20:50:41 diggersworld

謝謝，這就是jfiddle在「整理」下一行時的轉換時間時給出的，但無論出於何種原因，它都不適用於本地環境。 –

JQuery背景動畫 - 這是正確的做法嗎？

回答

相關問題