Question

我的链接现在向右滑动，但它们没有正确对齐。我需要一个text-align:right或float:right的动画片。此外，当您离开链接时，文本应再次左对齐。

Answer 1

要对齐，请使用上面的代码，然后更改

"left":"140"

与

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

Answer 2

试试这个，ti应该有用。

$('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 ...您可以在此fiddle中找到

小提琴只显示左/右，我想你想要将它设置为右边的动画。但是，通过更改对齐方式从左到右设置动画可能需要一些额外的计算

编辑：添加了答案的组合，因为它们都显示了一个解决方案

$('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);
   });
});

致记者：Alex Ball，Raminson，Esailija

jQuery动画权利

4 个答案: