2

テキストを少し右に「ぶつける」ことで、ホバーされているリスト項目にもう少し注意を向けようとしています。これは私が持っているものです:

$('.ipro_menu ul li a').hover(function(){
    $(this).animate({
        'padding-left':'20px'},100,function(){
            $(this).animate({
                'padding-left':'15px'});
    });
});

パディングは元は 15 ピクセルなので、リスト内のリンクにカーソルを合わせると、パディングが 5 ピクセル増加し、すぐに再び 15 ピクセルに戻ります。問題は、一度に複数の要素を移動していることです。時々、それ自体だけでなく、その上または下のアイテムも移動します。

助言がありますか？

4

2 に答える 2

6

私はあなたがやろうとしていることを簡単にjsfiddleにしました。

http://jsfiddle.net/tuXcA/

コードは基本的に次のとおりです。

$('ul').find('li').hover(function() {
    $(this).animate({
        'padding-left':'20px'
    },100);
}, function() {
    $(this).animate({
        'padding-left':'0px'
    },100);
});

ホバーすると右にスライドし、ホバーしていないときは通常の位置に戻ります。

于 2012-07-09T15:35:37.533 に答える
1

パディングは元々15pxであるため、リスト内のリンクにカーソルを合わせると、パディングが5px増加し、すぐに再び15pxに戻ります。

それで、基本的にあなたはバウンス効果が欲しいですか？もしそうなら：

var cssOver = { 'padding-left': '25px' },
      cssOut = { 'padding-left': '15px' },
      overDuration = 100,
      outDuration = 100,
      selector = '.ipro_menu ul li';

  $(selector).mouseover(function(){
    var _this = $(this);
    _this
      .clearQueue()
      .animate(cssOver, overDuration, function(){
        _this.animate(cssOut, outDuration);
      });
  });

実例： http： //bl.ocks.org/3077195

個人的には、このプラグインを使用することをお勧めします：http: //ricostacruz.com/jquery.transit/

于 2012-07-09T16:20:18.353 に答える