JQuery動畫marginTop

Question

我第一次嘗試JQuery。

我決定創建一個動畫菜單，我遇到了使用marginTop（和paddingTop）的問題。我正在嘗試在頁面加載時爲我的菜單項實現「波浪式」效果。當用戶懸停在物品上時，我希望他們略微擡起。

我可以使用marginLeft和paddingLeft來設置動畫效果，但這不是我正在尋找的效果，我很想知道我做錯了什麼。

這是我的jsFiddle code的鏈接，您可以在其中查看和使用我的代碼。 您會注意到「wave」功能不起作用，但「waveLeft」功能起作用。

下面是菜單的標記：

<div id="menucontainer"> 
    <ul id="menu"> 
    <li class="menu-element"> 
     <a href="/">Home</a> 
     <span style="color: White; font-size: 2em;">|</span> 
    </li> 
    <li class="menu-element"> 
     <a href="/Home/About">About</a> 
     <span style="color: White; font-size: 2em;">| </span> 
    </li> 
    <li class="menu-element"> 
     <a href="/Artists">Artists</a> 
     <span style="color: White; font-size: 2em;">|</span> 
    </li> 
    <li class="menu-element"> 
     <a href="/Releases">Releases</a> 
    </li> 
    </ul> 
</div> 

下面是菜單我的CSS代碼（它會在黑色背景）

ul#menu 
{ 
    padding: 0; 
    margin: 0; 
    font-family: "Lucida Console" , Monaco, monospace; 
} 

ul#menu li.menu-element 
{ 
    display: inline; 
    list-style: none; 
} 

ul#menu li#greeting 
{ 
    padding: 10px 20px; 
    text-decoration: none; 
    line-height: 2.8em; 
    color: #5C87B2; 
    font-family: "Lucida Console" , Monaco, monospace; 
} 

ul#menu li.menu-element a 
{ 
    padding: 10px 20px; 
    font-family: "Lucida Console" , Monaco, monospace; 
    text-decoration: none; 
    line-height: 2.8em; 
    color: #5C87B2; 
    font-size: 2em; 
} 

ul#menu li.menu-element a:hover 
{ 
    color: #fff; 
    text-decoration: none; 
} 

ul#menu li.menu-element a:active 
{ 
    color: #b5d6f9; 
    text-decoration: none; 
} 

ul#menu li.selected a 
{ 
    background-color: #fff; 
    color: #000; 
} 

這是我工作的JavaScript：

$(document).ready(function() { 
    menuWave("#menu", 25, 15, 150, .8); 
}); 

function menuWave(menu_id, pad_down, pad_up, time, multiplier) { 
    var list_elements = menu_id + " li.menu-element"; 
    var link_elements = list_elements + " a"; 

    var timer = 0; 

    $(list_elements).each(function (i) { 
     timer = (timer * multiplier + time); 
     $(this).animate({ marginLeft: "0px" }, timer); 
     $(this).animate({ marginLeft: "-15px" }, timer); 
     $(this).animate({ marginLeft: "0px" }, timer); 
    }); 


    $(link_elements).each(function (i) { 
     $(this).hover(
    function() { 
     $(this).animate({ paddingLeft: pad_down }, 150); 
    }, 
    function() { 
     $(this).animate({ paddingLeft: pad_up }, 150); 
    }); 
    }); 

} 

這是我的不工作代碼：

$(document).ready(function() { 
    menuWave("#menu", 25, 15, 150, .8); 
}); 

function menuWave(menu_id, pad_down, pad_up, time, multiplier) { 
    var list_elements = menu_id + " li.menu-element"; 
    var link_elements = list_elements + " a"; 

    var timer = 0; 

    $(list_elements).each(function (i) { 
     timer = (timer * multiplier + time); 
     $(this).animate({ marginTop: "0px" }, timer); 
     $(this).animate({ marginTop: "-15px" }, timer); 
     $(this).animate({ marginTop: "0px" }, timer); 
    }); 


    $(link_elements).each(function (i) { 
     $(this).hover(
      function() { 
       $(this).animate({ paddingTop: pad_down }, 150); 
      }, 
      function() { 
       $(this).animate({ paddingTop: pad_up }, 150); 
      }); 
    }); 

} 

marginLeft和paddingLeft動畫工作正常。

但是，如果我切換marginLeft到marginTop和paddingLeft paddingTop它不起作用。

感謝您的幫助

-Frinny

Answer 1

試試這個代碼在JS：

$(link_elements).each(function (i) { 
    $(this).hover(
     function() { 
      $(this).animate({ 'padding-top': pad_down+'px' }, 150); 
     }, 
     function() { 
      $(this).animate({ 'padding-top': pad_up+'px' }, 150); 
     } 
    ); 
}); 

這個代碼在CSS：

ul#menu li.menu-element a 
{ 
    ... 
display: block; 
float: left; 
} 

嘗試修復其餘風格爲了查看好結果...