How i can do to animate shadow of the element with jquery?

Question

I don't know syntax for animate shadow in webkit browsers.

$("#id").animate({-webkit-box-shadow: '0 0 1rem white'}, 1000);

od

$("#id").animate({boxShadow: '0 0 1rem white'}, 1000);

or

$("#id").animate({'-webkit-box-shadow': '0 0 1rem white'}, 1000);

but nothing happens.

is jQuery animate necessary ? if not then use Css animation . because css performance is very good — Maulik Anand, Jun 23 '14 at 03:58
@MaulikAnand, i have a small browser game, and i need pick some elements(control elements) for user before start game(training). I do not know which way is better to use? — isxaker, Jun 23 '14 at 04:05
@NikhilTalreja, i test this solution, but nothing happens too... — isxaker, Jun 23 '14 at 04:09
I recommend **[Velocity js](http://julian.com/research/velocity/)** . it performs better then CSS, especially in high stress situation, if you are developing game then the performance is key — Maulik Anand, Jun 23 '14 at 04:12
this link should help: http://stackoverflow.com/questions/4133366/correct-way-to-animate-box-shadow-with-jquery — Sunny Sharma, Jun 23 '14 at 04:32

score 1 · Answer 1 · answered Jun 23 '14 at 04:04

1

You can simply animate (transition) box-shadow directly in a modern web-kit browser. No need for any browser extensions:

#myBox {
    box-shadow: 5px 5px 3px 0 #CCCCCC;
    transition: box-shadow 1s;
}

Here's a fiddle:

http://jsfiddle.net/7SRUE/

answered Jun 23 '14 at 04:04

Kong

8,792
15
68
98

score 0 · Accepted Answer · edited May 23 '17 at 10:32

Credits Correct way to animate box-shadow with jQuery

Solution # 1 - JQuery:

You can check out Edwin Martin's jQuery plugin for shadow animation. It extends the .animate method, so you can simply use the normal syntax with "boxShadow" and every facet of that like color, the x- and y-offset, the blur-radius and spread-radius:

$(selector).animate({ boxShadow : "0 0 5px 3px rgba(100,100,200,0.4)" });

Solution # 2 - CSS:

#my-div{    
    position:absolute;
    top: 50px;
    left: 50px;
    height: 100px;
    width:  100px;
    background-color: #eee;
    animation: shadowThrob 5s;
    animation-direction: alternate;
    -webkit-animation: shadowThrob 5s;
    -webkit-animation-direction: alternate;
}
/* Standard syntax */
@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);}
}
/* Chrome, Safari, Opera */
@-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);}
}

EDIT

Changed this:

/* Standard syntax */
animation: shadowThrob 5s;
/* Chrome, Safari, Opera */
-webkit-animation: shadowThrob 5s;

To make it stop after 5 seconds... Also added some comments for browser compatibility in the code

JSFiddle: (Updated)

link

how i can add eventhandlers for start and stop this animation? — isxaker, Jun 23 '14 at 04:11
Edited the answer again.. sorry I missed the -webkit part... Check the new demo — imbondbaby, Jun 23 '14 at 04:26
@user3739658 -1! **strongly avoid just copying other's answer**. Even if you do this for reference, give proper credit to the original Author! I ca see it is already answered here: http://stackoverflow.com/questions/4133366/correct-way-to-animate-box-shadow-with-jquery — Sunny Sharma, Jun 23 '14 at 04:31

How i can do to animate shadow of the element with jquery?

2 Answers2