Не удается получить эффект jQuery для запуска при наведении мыши - PullRequest
Новая
       10

Не удается получить эффект jQuery для запуска при наведении мыши

4 голосов
/ 10 августа 2011

Я не знаю почему, но кажется, что animate () в функции hover «out» начинается со значения 0 вместо 16, которое должно быть установлено функцией hover «in»: 

  $.fx.step.textShadowBlur = function(fx) {
    $(fx.elem).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px #000'});
  };

  $('a').hover(function(){
    $(this).stop().animate({textShadowBlur:16}, {duration: 400});
  }, function(){
    $(this).stop().animate({textShadowBlur:0}, {duration: 900});
  });

Таким образом, я получаю резкое изменение тени текста при отсутствии мыши

Что я делаю неправильно?

jsfiddle

хорошо, я исправил это.Кажется, это ошибка jquery с определением функции шага или что-то в этом роде.В любом случае это будет работать: 

  $('a').hover(function(){
    $(this).stop().animate({nothing:16}, {duration: 400, step: function(now, fx){
       $(this).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px #000'});
     }});
  }, function(){
    $(this).stop().animate({nothing:0}, {duration: 900, step: function(now, fx){
       $(this).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px #000'});
     }});
  });

Ответы [ 2 ]

2 голосов
/ 10 августа 2011

выглядит как проблема синтаксиса 

$('a').hover(function() {
    $(this).stop().animate({textShadowBlur: 16}, {duration: 400});
    // remove the extra }});
}, function() {
    $(this).stop().animate({textShadowBlur: 0}, {duration: 900});
});

РЕДАКТИРОВАТЬ

похоже, что вы уже нашли работувокруг, вот вариант, чтобы сделать этот эффект с переходами CSS 3:

скрипка 

a {
    font-size:40px;
    text-shadow:0 0 0 #000;
    -webkit-transition:text-shadow .9s linear;
}
a:hover {
    text-shadow:0 0 16px #000;
    -webkit-transition:text-shadow .4s linear;
}
2 голосов
/ 10 августа 2011

Ваш синтаксис неверен.В настоящее время вы закрываете событие hover после наведения мыши.

Попробуйте: 

$('a').hover(
    function(){     
        $(this).stop().animate({textShadowBlur:16}, {duration: 400});     
    }, 
    function(){     
        $(this).stop().animate({textShadowBlur:0}, {duration: 900});   
});
...