0

我是第一次尝试 JQuery。

我决定创建一个动画菜单，但我在使用 marginTop（和 paddingTop）时遇到了问题。我试图在页面加载时为我的菜单项实现“波浪”类型的效果。当用户将鼠标悬停在项目上时，我希望它们稍微抬起。

我可以使用 marginLeft 和 paddingLeft 让菜单设置动画，但这不是我想要的效果，我真的很想知道我做错了什么。

这是我的jsFiddle 代码的链接，您可以在其中查看和使用我的代码。您会注意到“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 它不起作用。

谢谢你的帮助

-弗林尼

4

1 回答 1

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

尝试修复样式的其余部分以查看良好的结果...

于 2012-07-26T02:38:46.537 回答