Наведите указатель мыши на любой абзац, добавьте div с небольшим сообщением, отпустите, исчезает, верно? - PullRequest
Новая
       23

Наведите указатель мыши на любой абзац, добавьте div с небольшим сообщением, отпустите, исчезает, верно?

3 голосов
/ 18 февраля 2011

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

При наведении курсора на P, #both добавляется к этому абзацу и центрируется.Когда я парю и затем перехожу к новому абзацу, он исчезает на первой букве P и исчезает на теперь наведенной букве P. Это лучший способ сделать это?Позже я буду использовать это, чтобы позволить людям щелкнуть изображение закладки, затем, когда они наведут курсор на P, он сделает то, что делает мой код ниже, затем, когда они нажмут на этот P, он создаст закладку для этого абзаца, но я действительнопросто нужна помощь с кодом ниже.СПАСИБО! 

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

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

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

это не работает гладко, это просто не правильно ....

Ответы [ 3 ]

2 голосов
/ 18 февраля 2011

Просто используйте класс вместо 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 голосов
/ 18 февраля 2011

Я бы, наверное, немного изменил: 

$('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 & mdash; тот, который исчезает в старом абзаце, и тот, который добавлен в новый. Наличие двух элементов с одинаковым id недопустимо и чревато опасностью.

Возможно, я бы также отменил анимацию раньше, если вернусь к тому же абзацу: 

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

    $(this).find('span.both').stop().remove(); // Stop and remove it if it's 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()
    });

});
0 голосов
/ 18 февраля 2011

Мне не кажется, что вам нужно продолжать и уходить в дом.Просто введите диапазон по умолчанию с помощью style="display:none;", а затем 

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

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

Это не будет работать точно, вам, возможно, придется возиться с прозрачностью в стиле по умолчанию, чтобы получить то, что вы хотите.Тем не менее, нет необходимости манипулировать домом.

...