使用jQuery为box-shadow设置动画的正确方法 [英] Correct way to animate box-shadow with jQuery

问题描述

哪些是使用jQuery为 box-shadow 属性设置动画的正确语法？

  $ （）.animate（{？：0 0 5px＃666}）; 
  

解决方案

直接回答

使用Edwin Martin的 jQuery插件进行阴影动画 扩展了 .animate 方法，您可以简单地使用boxShadow的正常语法以及该方法的每个方面 - - and y-offset，blur-radius and spread-radius - an animated：

  $ ）.animate（{boxShadow：0 0 5px 3px rgba（100,100,200,0.4）}）; 
  
 
 
 
 编辑：现在包含多个阴影支持。
 
 
 
 
 
 
使用CSS动画
 
 
 
 jQuery通过更改风格 DOM元素的属性，这可能会导致特殊的意外，并从样式表中移动样式信息。 
 
 
 
我找不到CSS阴影动画的浏览器支持统计信息，但您可以考虑使用jQuery应用基于动画的类而不是直接处理动画。例如，您可以在样式表中定义一个box-shadow动画：
  @keyframes shadowPulse { 
 0％{
 box-shadow：0px 0px 10px 0px hsla（0，0％，0％，1） 
} 
 
 100％{
 box-shadow：0px 0px 5px 0px hsla（0，0％，0％，0） 
} 
} 
 
 .shadow-pulse {
 animation-name：shadowPulse; 
 animation-duration：1.5s; 
 animation-iteration-count：1; 
 animation-timing-function：linear; 
} 
  
然后可以使用原生 cssanimationend 属性来将动画结束与您在JS代码中执行的操作同步：
  $（'。element'）。addClass（'shadow-pulse'）; 
 $（'。element'）。on（'cssanimationend'，function（）{
 $（'。element'）。removeClass（'shadow-pulse'）; 
 // do别的... 
}）; 
  
 
Which is the correct syntax to animate the box-shadow property with jQuery?
$().animate({?:"0 0 5px #666"});

解决方案
Direct answer

Using Edwin Martin's jQuery plugin for shadow animation, which extends the .animate method, you can simply use the normal syntax with "boxShadow" and every facet of that - "color, the x- and y-offset, the blur-radius and spread-radius" - gets animated: 
$(selector).animate({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" }); 
Edit: Now includes multiple shadow support.



Using CSS animations instead

jQuery animates by changing the style property of DOM elements, which can cause surprises with specificity and moves style information out of your stylesheets. 

I can't find browser support stats for CSS shadow animation, but you might consider using jQuery to apply an animation-based class instead of handling the animation directly. For example, you can define a box-shadow animation in your stylesheet:
@keyframes shadowPulse {
    0% {
        box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 1);
    }

    100% {
        box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0);
    }
}

.shadow-pulse {
    animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
You can then use the native cssanimationend property to synchronise the end of the animation with what you were doing in your JS code:
$('.element').addClass('shadow-pulse');
$('.element').on('cssanimationend', function(){  
    $('.element').removeClass('shadow-pulse');
    // do something else...
});


                        
这篇关于使用jQuery为box-shadow设置动画的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！