Question

我甚至可能没有正确使用“事件”这个词。这就是我想要做的事情：

我有一个以“阅读更多”字样开头的链接。当用户将鼠标悬停在“Ream More”链接上点击它时，我希望右边的填充稍微扩展一下，然后在悬停停止时收缩。我可以很容易地做到这一点：

$('#post-text a.more-link').hover(
function(){$(this).animate({paddingRight: '18px'}, 200);},        
function(){$(this).animate({paddingRight: '4px'}, 200);});

但是当我将鼠标悬停在它上面时，我也想附加文字“，请”。我可以使用.append()做到这一点，但我遇到了麻烦。如果我将它添加到代码中：

$('#post-text a.more-link').hover(
function(){$(this).animate({paddingRight: '18px'}, 200), $(this).append(", Please");},        
function(){$(this).animate({paddingRight: '4px'}, 200);});

然后每当有人徘徊时，就会添加另一个“，请”。我只想在第一次悬停时添加一次。如果可能的话。

另外，我希望“，请”留在那里，当他们停止徘徊时不要离开。我猜我需要使用.one()或.bind()，但我不确定应该去哪里。

非常感谢任何帮助。提前谢谢。

更新：我取得了一些进展，见下文：

首先，我刚学会了如何最终用户.one()，我还了解到.hover()与mouseenter的方法相同。所以这就是我现在所做的工作：

$('#post-text a.more-link').one('mouseenter', function() {
$(this).append(", Please");});

所以我对此很满意，我只需要弄清楚如何将这个和填充动画添加到更多的光晕。

Answer 1

use $(this).append(' <span class="whatever">Please</span>');});

and on mouseout $(this).remove('.whatever');

使用而不是：

$(document).ready(function(){


    $("#sall").live("mouseover mouseout", function(event) {
      if ( event.type == "mouseover" ) {
        $(this).append('Please');
      } else { 
          var g = $(this).html();
         $(this).html(g.substr(0,g.length-"Please".length)); //get rid of please
      }
});

})

请参阅此示例http://jsfiddle.net/jECW5/

使用jQuery在悬停时添加动画css更改和附加

1 个答案: