2

このコードを使用してマウスオーバーアニメーションを作成しようとしています。

var menu = {
    colors: [ '#B8410D', '#1C70A8', '#27A328', '#B59215' ],

    alignMenuLeft: function() {
        var slider_div = jQuery('#slider-1');
        var menu_div = jQuery('#dupl-menu');
        var offset = slider_div.offset();

        menu_div.css({
            'top': offset.top,
            'left': offset.left + slider_div.width() - menu_div.width()
        });
    }
}

jQuery(document).ready(function($) {
    $('#slider-1').nivoSlider({
        effect: 'fade',
        animSpeed: 500,
        pauseTime: 4000,
        controlNav: false,
        captionOpacity: 0,
        directionNav: false,

        afterLoad: menu.alignMenuLeft
    });

    $('#dupl-menu .menu-item').mouseover(function() {
        console.log('mouseover');
        $(this)
            .stop()
            .animate({
                    borderRightColor: menu.colors[$(this).index()],
                    borderRightWidth: '6px',
                    borderRightStyle: 'solid'
                },
                { queue: false, duration: 600 });
    });

});

jQuery(window).resize(menu.alignMenuLeft);

（フィドル）

ただし、機能しません。完了をログに記録するための3番目のパラメーターとして関数を追加すると、.animate呼び出されません。しかし.css、の代わりに使用する.animateと機能するので、セレクターは正しいです。この問題の原因は何ですか？

編集：

これはHTMLです：

<div id="dupl-menu">
    <div class="menu-main-container">
        <ul id="menu-main" class="menu">
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50"><a href="#item1">item1</a></li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="#item2">item2</a></li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52"><a href="#item3">item3</a></li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53"><a href="#item4">item4</a></li>
        </ul>
    </div>      
</div>
4

5 に答える 5

3

特定のプロパティを調整するには、 jQueryUIが必要になる場合があります。

あなたのコードに基づいた私の例をチェックしてください：

http://jsfiddle.net/Z4xf9/

私はあなたのコードをいくつかの場所で少し改善しました、うまくいけばそれは今より明確になっています。とで新しい"on"イベントハンドラーを使用することを好みます。mouseentermouseleave

境界線のサイズと色を強調して、変更をより明確にしました。

幸運を！

編集：私はそれが何であるかわからなかったmenu.colors[$(this).index()ので、それを省略して単純な文字列の色のキーワードに置き換えました...しかし、これは簡単に交換できます。

于 2012-12-07T10:45:42.547 に答える
2

カラーアニメーションを実行する場合は、jQueryUIを含める必要があると思います。

jQueryUIカラーアニメーションを参照してください

于 2012-12-07T10:32:01.530 に答える
2

問題は2つありました。1つの問題は、多くの人が言及したように、アニメーションがこれらのプロパティで機能するためにjquery-uiが必要なことでした。2番目の問題は、li要素には元々borderプロパティがなかったことです。追加した

#dupl-menu .menu-item {
  border-right: 0 solid white;
}

CSSにとって、そして今ではそれは正常に機能します（そしてこれはフィドルで異なっていたものです）。

于 2012-12-07T11:40:26.320 に答える
1

FiddleでこのTypeErrorを解決すると、機能します。

Uncaught TypeError: Object [object Object] has no method 'nivoSlider'

削除した後、いくつかのjQuery行が機能します。

フィドル： http： //jsfiddle.net/6xDkF/5/

于 2012-12-07T10:57:59.073 に答える
1

カラースタイルをアニメーション化する場合は、jQueryUIを含める必要があります。バニラanimate（）は、より基本的なことに使用されます。基本的に、整数値（位置、不透明度、高さ、幅など）を介してCSSを介して制御されるものですが、色は制御されません。そのための別のプラグイン、つまりjQueryUIが必要です。

于 2012-12-07T10:46:48.443 に答える