使用jQuery在悬停时向右移动列表项

Using jQuery to bump list item to right on hover

本文关键字：右移 移动 列表 jQuery 悬停 使用      更新时间：2023-09-26

我试图通过将文本向右"颠簸"一点，然后在悬停时再次向后"颠簸"，来引起人们对悬停的列表项的更多关注。这就是我所拥有的：

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

填充原来是15px，所以当你把鼠标悬停在列表中的一个链接上时，填充会增加5px，然后很快又回到15px。问题是它一次移动不止一个元素。有时它不仅移动自己，还移动上面或下面的物品

有什么建议吗？

我对你想做的事情做了一个快速的分析。

http://jsfiddle.net/tuXcA/

代码基本上是：

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

悬停时向右滑动，未悬停时滑回正常位置。

填充最初是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/

相关文章：