3

マウスオーバーで背景位置をアニメーション化するメニューリストがあり、これは機能しています。backgroundPosition: 0 の場合、メニュー項目はアクティブです。しかし、ユーザーが他のリスト項目の上にカーソルを置いていないときに、リストの最初の項目がアクティブに戻るようにします。

これは私がこれまでに持っているものです。ムーブオーバーのアニメーション効果は機能していますが、最初のアイテムをアクティブな状態に戻す方法がわかりません。

jQuery

$(function() {
    //Edited...
    //services menu background effect 
    var timer;
    function invocation() {
        timer = setTimeout(function() {
            $('#services li:first a').stop().animate({
                backgroundPosition: 0
            }, 500);
        }, 300);
    }
    $('li.menu a').each(function() {
        $(this).css({
            backgroundPosition: -416
        });
        $(this).mouseover(function() {
            $(this).stop().animate({
                backgroundPosition: 0
            }, 500)
            if ($(this).attr('id') != 's_active') {
                $('#services li:first a').stop().animate({
                    backgroundPosition: -416
                }, 500);
            }
            clearTimeout(timer);
        }).mouseout(function() {
            hover = false;
            $(this).stop().animate({
                backgroundPosition: -416
            }, 500)
            invocation();
        });
    });
    $('#services li:first a').css({
        backgroundPosition: 0
    }, 500);
    //invocation();
});​

HTML

<div id="services">
    <h1>Services</h1>
    <ul>
        <li id="s_active" class="menu"><a href="#">Semi / Intensive courses</a> </li>
        <li class="menu"><a href="#">Pass plus / Motorway tuition</a></li>
        <li class="menu"><a href="#">Block bookings</a></li>
        <li class="menu"><a href="#">Mock theory and Mock practical tests</a></li>
    </ul>
</div>
4

1 に答える 1

0

これが私がそれを行う方法です

を交換するだけです

 doBackgroundEffect()

あなたの背景と位置のアニメーション

于 2012-06-12T04:45:30.873 に答える