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;
}

尝试修复其余的样式，以便查看效果良好......

JQuery Animate marginTop

1 个答案: