Добавление как анимированного изменения CSS, так и добавления при наведении курсора с помощью jQuery - PullRequest
Новая
       6

Добавление как анимированного изменения CSS, так и добавления при наведении курсора с помощью jQuery

2 голосов
/ 28 июля 2011

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

У меня есть ссылка, которая начинается со слов «Подробнее». Когда пользователь наводит курсор на ссылку «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");});

Так что я доволен этим, мне просто нужно выяснить, как добавить и то, и анимацию отступа для немного большей вспышки.

1 Ответ

1 голос
/ 28 июля 2011 
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/

...