Hover over any paragraph, add a div with a small message, move it away, it disappears, is that right?

http://jsfiddle.net/nicktheandroid/3AraQ/

When P freezes, # is also added to this paragraph and centered. When I am, and then on a new paragraph, it disappears on the first P and disappears on the now hover P. Is this the best way to do this? Later I will use this so that people can click on the bookmark image, and then when they hover over P, it will do what my code below does, and then when they click on P it will bookmark this item, but I really just need help with the code below. THANK!

$('p').hover(function() {

    $(this).append('<span id="both">BOOKMARK THIS</span>')
        $('#both').animate({opacity: 1.0}) 

}, function(){
        $('#both').fadeOut(600, function(){
            $(this).remove()
        })
});

it does not work smoothly, it is simply wrong ....

+3
source share
3 answers

id:

$('p').hover(function() {

    $(this).append('<span class="both">BOOKMARK THIS</span>')
        $('.both').animate({opacity: 1.0}) 

}, function(){
        $('.both').fadeOut(600, function(){
            $(this).remove()
        })
});

http://jsfiddle.net/yzXxH/

+2

, , :

$('p').hover(function() {

    $('<span class="both">BOOKMARK THIS</span>')
        .appendTo(this)
        .animate({opacity: 1.0}) 

}, function(){

    var both = $(this).find('span.both');
    both.fadeOut(600, function(){
        both.remove()
    });

});

, class id, , , span s — , , . id .

, , , :

$('p').hover(function() {

    $(this).find('span.both').stop().remove(); // Stop and remove it if it there
    $('<span class="both">BOOKMARK THIS</span>')
        .appendTo(this)
        .animate({opacity: 1.0}) 

}, function(){

    var both = $(this).find('span.both');
    both.fadeOut(600, function(){
        both.remove()
    });

});
+2

, adidng dom. style="display:none;",

$('p').hover(function() {
        $(this).find('#both').animate({opacity: 1.0}) 

}, function(){
        $(this).find('#both').fadeOut(600)
});

This will not work for sure, you may need to use transparency in the default style to get what you want. However, there is no need to manipulate dom.

0
source

Source: https://habr.com/ru/post/1793014/


All Articles