0

ナビゲーション メニューを作成しようとしたときに問題が発生しました。jqueryui を使用して、onmouseover 関数、onmouseout 関数、onclick 関数の 3 つの関数を定義しました。最初のものはホバー効果をエミュレートするために使用され、最後のものは選択を変更するために使用されます。選択アニメーションが終了する前に、クリックしたオプションからマウスを削除しない限り、すべてうまく機能します。

コードは次のとおりです。

HTML

<ul id="inav">
    <li class="opt selected">Option1</li>
    <li class="opt">Option2</li>
    <li class="opt">Option3</li>
    <li class="opt">Option4</li>
    <li class="opt">Option5</li>
</ul>

CSS

body
    {
        background: #000;
    }
#inav
    {
        display: block;
        width: 300px;
        height: 400px;
        float: left;
        margin: 0;
        padding: 0;
        padding-top: 60px;
        background: url('../img/nbg.png');
    }
.opt
    {
        display: block;
        width: 100%;
        height: 40px;
        list-style: none;
        color: #FFF;
        font-size: 1.7em;
        text-align: center;
        cursor: pointer;
        padding-top: 10px;
        text-shadow: 0 0 1px #FFF;
    }
.selected
    {
        background: #00F;
    }

Jクエリ

$('.opt').mouseover(function(){
    $(this).animate({backgroundColor: '#F00'}, 400 );
});
$('.opt').mouseout(function(){
    if($(this).hasClass('selected'))
    {
        $(this).animate({backgroundColor: '#00F'}, 400 );
    }
    else
    {
        $(this).animate({backgroundColor: 'transparent'}, 400 );
    }
});
$('.opt').click(function(){
    if(!$(this).hasClass('selected'))
    {
        $('.selected').animate({backgroundColor: 'transparent'}, 400, function(){
            $('.opt').removeClass('selected');
        });
        $(this).animate({backgroundColor: '#00F'}, 400, function(){
            $(this).addClass('selected');
        });
    }
});

コードの実際の例を次に示します。ここをクリック

onmouseover 関数が実行されるべきではないときに実行されていることが問題であることはわかっていますが、その理由や修正方法がわかりません。

どんな助けでも大歓迎です。

4

1 に答える 1

1

移動時に選択したアイテムが透明になる理由$(this).addClass('selected');は、アニメーションのコールバック関数を配置したためです。これは、アニメーションが終了するまで、li のクラスが「選択」されないことを意味します。あなたのliにはクラスがないため、移動するとmoveout関数のelse部分に入り、透明になります。これに対する解決策は、次のように addClass および removeClass 関数をコールバックの外に置くことです。

    $('.selected').animate({backgroundColor: 'transparent'}, 400);
    $('.opt').removeClass('selected');
    $(this).addClass('selected'); 
    $(this).animate({backgroundColor: '#00F'}, 400);

どのように見えるかを示すために、jsfiddle を作成しました: http://jsfiddle.net/7nrZ6/

于 2013-05-14T18:24:49.147 に答える