Я хотел бы, чтобы черный текст сообщения об ошибке «светился» с красным контуром, который исчезал через секунду, но при обновлении возвращался к «полному свечению» и снова начинал исчезать, даже если он не исчез полностью в первую очередь. Есть ли довольно простой способ jQuery/CSS сделать это? Я думаю, что два одновременных метода затухания будут конкурировать друг с другом, будучи асинхронными и все такое, и я не совсем понимаю, как создать эффект свечения и возможно ли это вообще, используя стандартные стили.
Специальный текстовый эффект затухания свечения jQuery
Ответы (6)
Вам не нужно использовать какие-либо внешние плагины, вы можете сделать это с помощью всего лишь jQuery 1.8 и css3, но это непросто. Вам нужно объединить свойство css3 text-shadow
с animate()
ОБНОВЛЕНИЕ: исправлены ошибки.
Вот работает эффект свечения текста jsFiddle.
jQuery:
var red = $(".red");
red.click(function() {
if ( !$(this).is(':animated') )
//you just adjust here
red.glowEffect(0,40,500);
//which is:
//red.glowEffect( start value , destination value , duration );
});
$.fn.glowEffect = function(start, end, duration) {
var $this = this;
return this.css("a", start).animate({
a: end
}, {
duration: duration,
step: function(now) {
$this.css("text-shadow","0px 0px "+now+"px #c61a1a");
}
});
};
CSS:
.red { text-shadow: 0px 0px 0px #c61a1a; }
Примечание. Нет необходимости определять префиксы поставщиков, такие как -webkit- -ms- -moz- -o-
. jQuery 1.8 исправляет это автоматически.
Источник: я задавал аналогичный вопрос на прошлой неделе, и получил отличные ответы:
Как объединить анимацию jQuery со свойствами css3 без использования CSS-переходов?
red.glowEffect
внутри клика. Я объяснил и указал на это в своем обновлении.
- person Barlas Apaydin; 30.08.2012
0
.
- person Barlas Apaydin; 30.08.2012
Решение на чистом CSS3, бесстыдно украденное из здесь:
a.glow, a.glow:hover, a.glow:focus {
text-decoration: none;
color: #aaf;
text-shadow: none;
-webkit-transition: 500ms linear 0s;
-moz-transition: 500ms linear 0s;
-o-transition: 500ms linear 0s;
transition: 500ms linear 0s;
outline: 0 none;
}
a.glow:hover, a.glow:focus {
color: #fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
}
a.glow
и a.glow:hover, a.glow:focus
, то вы сможете настроить синхронизацию для включения и выключения переходов отдельно. jsfiddle.net/mblase75/GzTC7
- person Blazemonger; 30.08.2012
Вот версия ответа барласапайдина, которая работает с отрицательной анимацией:
$.fn.glowEffect = function(start, end, duration, callback) {
// Fetch last animation position
if (this.data("last-glow"))
start = this.data("last-glow");
return this.animate({
'placeholder': end // This can be anything, it's just a placeholder to allow the animation to run
}, {
duration:duration,
step: function(now, fx) {
// Calculate current position
now = parseInt(start + (end - start)*(fx.pos));
// Set current animation position
$(fx.elem).css("text-shadow","0px 0px "+now+"px #c61a1a")
// Save position (if animation is interrupted)
.data("last-glow", now);
},
complete:callback
});
};
$(".red").click(function() {
$(this)
.stop()
.glowEffect(0,50,1000, // Fade in
function()
{
$(this).glowEffect(50,0,1000); // Fade out
});
});
Код немного запутанный, но работает отлично.
Некоторая полезная сторонняя документация по объекту «шаг»:
http://cdmckay.org/blog/2010/03/01/the-jquery-animate-step-callback-function/
С помощью плагина анимации jQuery UI вы можете создать нечеткую красную тень позади вашего текста (используя свойства CSS3), а затем анимировать ее непрозрачность, размер и т. д.
Чтобы сделать циклическую анимацию в JQuery, вы можете сделать что-то вроде этого:
Затухание JQuery с циклом и задержкой
Затем вы можете использовать CSS3 для добавления свечения текста (или тени), но обратите внимание, что это не поддерживается в некоторых браузерах.
Я бы использовал свойство CSS3 text-shadow для эффекта свечения и $(".textid").stop().addClass("glow", 1000); для анимации.
РЕДАКТИРОВАТЬ: Хорошо, это не сработало: http://jsfiddle.net/2pBxP/ :)