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 に答える