0

次のスクリプトをデバッグして、最適な望ましい UX を確保しようとしています。このフィドルで見られるように、このスクリプトは期待どおりに機能していません。

    $("ul.menu li").mouseover(function() {
        $(this).find("ul.sub-menu").animate({"opacity": "show"}, 800, "swing");

        $(this).hover(function() {}, function(){
            $(this).find("ul.sub-menu").animate({"opacity": "hide"}, "slow");
        });
    });

ご覧のとおり、アニメーションは最初はトリガーされません。また、ユーザーが誤って複数のリンクにカーソルを合わせると、望ましくないアニメーションが何秒も再生されなくなります。この応答性を編集したい。プロの UI デザインで jQuery を使用する場合にこれに対処するための現在の主な方法は何ですか?また、これらのソリューションをスクリプトに実装するにはどうすればよいですか?

4

3 に答える 3

1

.stop().animate({...});新しいアニメーションを開始する前に、既存のアニメーションを停止してみてください。

ドキュメント: http://api.jquery.com/stop/

于 2013-01-28T04:38:21.663 に答える
1

最初の問題を再現できません。ただし、スクリプトを少し更新して、希望する動作が得られるようにしました (少なくとも近い):

  1. アニメーションの後に使用.stopしてアニメーションを停止し、繰り返されるイベントでキューに入れないようにします
  2. .hoverコールバック内でイベントをバインドしないでください。別々に束ねる
  3. .mouseenter/を使用.mouseleaveして、同じ親を持つ異なる要素を移動することによってイベントがトリガーされないようにします。

http://jsfiddle.net/pF8wZ/2/

于 2013-01-28T04:41:46.553 に答える
1

あなたはネストしてmouseover()おり、.hover()これが主な問題でした。ホバーしたときに何かを表示し、ホバーアウトするとアニメーションを反転させたいだけです。

これを試してください：http://jsfiddle.net/pF8wZ/4/

jQuery(document).ready(function($) {
    $("ul.menu > li").hover(
        function() {
            $(this).find("ul.sub-menu").stop().animate({
                height: 'toggle',
                opacity: 'toggle'
            });
        }
    );
});

また、フィドルから CSS をクリーンアップしました。ホバリング動作を機能させるには、これが必要です。

#access {
background: #000;
margin: 0 auto;
display: block;
float: left;
    position: relative;
}
ul.menu { 
    list-style: none;
    margin: 0;
}
ul.menu > li {
    float: left;
    padding: 5px;
    background: #ccc;
}
#access ul .sub-menu {
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
    width: 200px;
    background-color: #474747;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    display: none;
}
#access ul .sub-menu a {
    background: #333;
    line-height: 1em;
    display: block;
    padding: 3px 5px;
    background-image: -moz-linear-gradient(100% 100% 90deg, #474747, #939393);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#939393), to(#474747));
}

そしてHTML：

<div id="access">
<div class="menu-header">

<ul id="menu-wordpress-sandbox-menu" class="menu">
    <li id="menu-item-17" class="menu-item">
        <a href="#">Fruits</a>
        <ul class="sub-menu">
            <li id="menu-item-19" class="menu-item"><a href="#">Oranges</a></li>
            <li id="menu-item-20" class="menu-item"><a href="#">Apples</a></li>
        </ul>
    </li>
    <li id="menu-item-32" class="menu-item">
        <a href="#">Colors</a>
        <ul class="sub-menu">
            <li id="menu-item-30" class="menu-item"><a href="#">Blue</a></li>
            <li id="menu-item-31" class="menu-item"><a href="#">Red</a></li>
        </ul>
    </li>
    <li id="menu-item-33" class="menu-item">
        <a href="#">Links</a>
        <ul class="sub-menu">
            <li id="menu-item-34" class="menu-item"><a href="#">Google</a></li>
            <li id="menu-item-35" class="menu-item"><a href="#">Yahoo!</a></li>
        </ul>
    </li>
</ul>

</div>
</div>
于 2013-01-28T04:44:06.677 に答える