开发者

Adding both an animated css change and an append on hover using jQuery

I may not even be using the word "events" correctly. Here's what I want to do:

I have a link that starts off with the words "Read More". When a user hovers over the "Ream More" link to click on it, I'd like the padding on the right to expand a bit and then contract when the hovering stops. I can do that pretty easily with this:

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

But I also want to append the text ", Pl开发者_如何学Cease" when you hover over it as well. I can do that using .append() but I kind of run into a snag. If I add it to the code like this:

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

Then every time someone hovers it adds another ", Please". I only want to add it once, on the first hover if possible.

Additionally, I'd like the ", Please" to stay there and not leave when they stop hovering. I'm guessing I'm going to need to use .one() or .bind() but I'm not sure where that's supposed to go.

Any help would be greatly appreciated. Thanks in advance.

UPDATE: I made some progress, see below:

First of all, I just learned how to finally user .one() and I also just learned that .hover() works in the same method as mouseenter. So here's what I have that works now:

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

So I'm happy with that, I just need to figure out how add both that and the padding animation for a little more flare.


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

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

use rather :

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

})

see this example http://jsfiddle.net/jECW5/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜