0

問題: アニメーションの最初の部分だけを取得します。ホバーアニメーションは実行されません。アイデアは、ホバーしたときに底が上下に動くようにすることです。

このサイトでの作業: http://ripsraps.com/daniel/

このスクリプトを使用してナビゲーション バーをアニメーション化する: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/

これはJqueryです：

$(document).ready(function()
{
    slide("#sliding-navigation", 25, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
    var list_elements = navigation_id + " li.sliding-element";
    var link_elements = list_elements + " a";
    var timer = 0;
    $(list_elements).each(function(i)
    {

        $(this).css("margin-top","-180px");
        timer = (timer*multiplier + time);
        $(this).animate({ marginTop: "0" }, timer);
        $(this).animate({ marginTop: "15px" }, timer);
        $(this).animate({ marginTop: "0" }, timer);
    });     
    $(link_elements).each(function(i)
    {
        $(this).hover(
        function()
        {
            $(this).animate({ paddingTop: pad_out }, 150);
        },      
        function()
        {
            $(this).animate({ paddingTop: pad_in }, 150);
        });
    });
}

PS: 私はフィドルを知りません。フィドルのリンクは提供しません。

4

1 に答える 1

0

Chrome デバッガーでコードを調べるとわかるように、現在アニメーションが適用されています。正しく適用されていないため、表示されません。

link_elements の代わりに list_elements にホバー効果を適用する必要があると思います。また、パディングトップではなく、マージントップを使用してアニメーション化します。

PS: フィドルはそれほど難しいものではありません。ぜひ一度試してみてください。

于 2012-08-03T19:25:58.333 に答える