0

アニメ化しようとしているサイドメニューがあります。ページの読み込み時に表示してから、左マージンにスライドさせたい。ホバーすると、各liが右に150pxアニメーション化し、マウスのままで-150pxに戻ります。

私のコードが正しいことはほぼ確実ですが、...いいえ。手伝って頂けますか？

<script type="text/javascript">

$(document).ready(function() {
  $('#nav').animate( {left: "-110px"} );

//When mouse rolls over
  $('#nav li').hover(function() {
    $(this).stop().animate( {left: "150px"}, {queue: false, duration: 'slow'} );

  }, function() {
    $(this).stop().animate( {left: "-150px"}, {queue: false, duration: 'slow'} );  

    });


  }); // end of document ready

</script>
4

2 に答える 2

0

を に設定するか、代わりに を使用する必要が<li>あります。また、and を使用して、マウス ポインターが必要な要素の上にある場合にのみイベントが発生するようにすることをお勧めします (詳細については、mouseover()を参照してください)。これを試して：positionrelativemargin-leftmouseentermouseleave

HTML

<ul id="nav">
     <li>Item1</li>
     <li>Item2</li>
</ul>

CSS

li {
    position: relative;
}

JS

$nav = $('#nav');
$nav.animate( {'left': "-110px"} );

//When mouse rolls over
$nav.find('li')
.on('mouseenter', function() {
    $(this).stop().animate( {'left': "150px"}, {queue: false, duration: 'slow'} );
})
.on('mouseleave', function() {
    $(this).stop().animate( {'left': "-150px"}, {queue: false, duration: 'slow'} );  
});

ここでテストできます。

于 2013-02-07T00:24:18.833 に答える
0

http://jsfiddle.net/T5W2P/

位置を相対に設定する必要があります。

HTML:

<ul id="nav">
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
</ul>

CSS:

#nav, #nav li {
    position: relative;
}

jQuery:

$(document).ready(function () {
    $('#nav').animate({
        left: "-20px"
    });
    //When mouse rolls over
    $('#nav li').hover(function () {
        $(this).stop().animate({
            left: "20px"
        }, {
            queue: false,
            duration: 'slow'
        });
    }, function () {
        $(this).stop().animate({
            left: "0px"
        }, {
            queue: false,
            duration: 'slow'
        });
    });
});
于 2013-02-07T00:27:04.940 に答える