Jquery, add & remove element on hover

I came a cross a problem which I tried pretty much everything without a solution.

$('a.hovered').hover(function () {
    $(this).after(' <img src="images/icons/famfamfam/silk/user_go.png" />');
},function () {
    $(this).remove(' <img src="images/icons/famfamfam/silk/user_go.png" />');
});

Of course I tried many versions of this remove() without any success. I will be glad if anyone could help me out with this problem.

Additionally I would like to add effe开发者_如何学Pythonct of fadeIn() and fadeOut() but of course this wasn't successful also.

I can add the image but I can't remove it (even fadeIn didn't work while I can successfully add images).

Thank you for your help and time in advance.

You really don't want to do that. Your code will be quicker, clearer and easier to maintain if you just show and hide an image that always exist.

Just put the img into your html with and id set and style="display: none;" to hide it.

Your javascript code then becomes:

$('a.hovered').hover(function () {
    $("#user_go").show();
},function () {
    $("#user_go").hide();
});

Name you elements, it'll make life easier for you, i.e.:

$('a.hovered').hover(function () {
    $(this).after(' <img id="user_go" src="images/icons/famfamfam/silk/user_go.png" />');
},function () {
    $("#user_go").remove();
});

You cant reference to created object in such manner, try

$('a.hovered').hover(function () {
    $(this).after(' <img src="images/icons/famfamfam/silk/user_go.png" id="addedImage"/>');},
    $('#addedImage').remove();
});

Yep, and while I write, two other post the same stuff :)

.remove() doesn't take a piece of HTML:

$('a.hovered').hover(function () {
    $(this).after(' <img src="images/icons/famfamfam/silk/user_go.png" id="go_image" />');
},function () {
    $('#go_image').remove();
});

why not just do this?

$('a.hovered').hover(function () {      
$(this).after(' <img src="images/icons/famfamfam/silk/user_go.png" />');  },
function () {
$(this).find('img').remove();
 });