jquery - jQuery アニメーション右

Question

http://jsfiddle.net/hashie5/ZKwA6/

リンクが右にスライドしますが、正しく配置されません。text-align:rightまたはでアニメートする必要がありfloat:rightます。また、リンクを離れると、テキストは再び左揃えになります。

Answer 1

右揃えにするには、上記のコードを使用して変更します

"left":"140"

と

"left": $(this).width() - $(this).find('a').width()

Answer 2

これを試してみてください。うまくいくはずです。

$('document').ready(function() {

   $('.menu td').hover(
      function() {
      var a =  $(this).find('a').first();
      a.css('position', 'relative')
       .stop().animate({ left: $(this).width() - a.width()}); 
      },
      function() {
        $(this).find('a').first().stop().animate({ left: 0 });
      });
   });

Answer 3

ホバーメソッドを試してください：

$('.menu td').hover(function() {
        $(this).find('a').animate({
            "left": "140"
        }, 500);
    },
        function() {
        $(this).find('a').animate({
            "left": "0"
        }, 500);
    });

http://jsfiddle.net/ZKwA6/10/

stop() の使用;

$('.menu td').hover(function() {
        $(this).find('a').stop().animate({
            "left": "140"
        }, 500);
    },
        function() {
        $(this).find('a').stop().animate({
            "left": "0"
        }, 500);
});

http://jsfiddle.net/ZKwA6/20/

Answer 4

まだあなたが望むものではありませんが、クラスを正しく追加して削除すると、あなたが望むものに見えるかもしれません

$('document').ready(function() {
    $('.menu td').delegate('', 'mouseover', function() {
        $(this).find('a').animate({
            "left": "0",
        }, 500);
        $(this).addClass('right');
    });
    $('.menu td').delegate('', 'mouseout', function() {
        $(this).find('a').attr('style', 'left:0;');
        $(this).removeClass('right');
    });
});​

Left のアニメーションを 0 に設定していることに注意してください...このフィドルで確認できます

フィドルは左/右のみを表示し、右にアニメーション化したいと思います。ただし、配置を変更して左から右にアニメーション化すると、追加の計算が必要になる場合があります

編集：すべてが解決策を示しているため、回答の組み合わせを追加しました

$('document').ready(function() {
    $('.menu td').delegate('', 'mouseover', function() {
        $(this).find('a').stop().animate({
            "left": $(this).width() - $(this).find('a').width()
        }, 500);
    });
    $('.menu td').delegate('', 'mouseout', function() {
       $(this).find('a').stop().animate({
           "left": "0",
        }, 500);
   });
});​

クレジット: アレックス・ボール、ラミンソン、エサイリヤ