76

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

$().animate({?:"0 0 5px #666"});
4

5 回答 5

80

直接回答

使用 Edwin Martin 的阴影动画 jQuery 插件，它扩展了该.animate方法，您可以简单地使用带有“boxShadow”的普通语法以及该方法的每个方面 -颜色、x 和 y 偏移量、模糊半径和扩展半径-得到动画。它包括多个阴影支持。

$(element).animate({ 
  boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
});

改用 CSS 动画

jQuery 通过更改styleDOM 元素的属性来制作动画，这可能会引起意外的特殊性，并将样式信息从样式表中移出。

我找不到 CSS 阴影动画的浏览器支持统计信息，但您可以考虑使用 jQuery 来应用基于动画的类，而不是直接处理动画。例如，您可以在样式表中定义一个盒子阴影动画：

@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;
}

然后，您可以使用本机animationend事件将动画的结束与您在 JS 代码中所做的同步：

$(element).addClass('shadow-pulse');
$(element).on('animationend', function(){    
    $(element).removeClass('shadow-pulse');
    // do something else...
});
于 2012-02-08T16:07:51.173 回答
30

如果您使用的是 jQuery 1.4.3+，那么您可以利用添加的 cssHooks 代码。

通过使用 boxShadow 钩子：https ://github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js

你可以这样做：

$('#box').animate({
    'boxShadowX': '10px',
    'boxShadowY':'10px',
    'boxShadowBlur': '20px'
});

钩子还不能让你为颜色设置动画，但我确信可以添加一些工作。

示例：http: //jsfiddle.net/petersendidit/w5aAn/

于 2010-11-09T12:11:45.523 回答
15

如果你不想使用插件，可以用一点 CSS 来完成：

#my-div{    
  background-color: gray;
  animation: shadowThrob 0.9s infinite;
  animation-direction: alternate;
  -webkit-animation: shadowThrob 0.9s ease-out infinite;
  -webkit-animation-direction: alternate;
}
@keyframes shadowThrob {
  from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
  to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
@-webkit-keyframes shadowThrob {
  from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
  to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
/*NOTE: The animation property is not supported in Internet Explorer 9 and earlier versions.*/

看看：http: //jsfiddle.net/Z8E5U/

如果你想要关于 CSS 动画的完整文档，你的魔法之路从这里开始。

于 2014-02-21T06:13:44.380 回答
4

我喜欢 ShaneSauce 解决方案！使用 ID 的类，您可以使用 jQuery addClass/delay/removeClass 将效果添加/删除到任何元素：

$('.error').each( function(idx, el){
    $( el )
        .addClass( 'highlight' )
        .delay( 2000 )
        .removeClass( 'highlight' );
});
于 2015-04-17T16:07:23.437 回答
0

下面是一个如何在没有插件的情况下做到这一点的示例：jQuery 动画框 但它没有使用插件带来的额外功能，但我个人喜欢看到（并理解）疯狂背后的方法。

于 2012-05-08T12:26:00.480 回答