4

Im asking this in reference to the previous thread of the same vein, which contains a number of outdated non-working solutions and as well as the jquery box-animation plugin which is restricted to one box. Does anyone know how to animate the box-shadow of multiple elements?

Community
  • 1
  • 1
user1361747
  • 31
  • 2
  • 9
  • `$('#box1').animate({boxShadow: '0 0 30px #44f'});` can't you add the ID field of multiple items. `$('#box1')..` `,$('#box2')..`, `$('#box3')..` – Kyle Monti Apr 29 '12 at 19:55
  • and Now that I'm looking at it, the page you linked allows more than one box to be animated. but I would get away from using onMouseOver as the eventhandlers work different from browser to browser. – Kyle Monti Apr 29 '12 at 20:00
  • Yes, my mistake, it looks like you can, just not from within a script, it only seems to work as the example is, by putting it directly within the element. – user1361747 Apr 30 '12 at 04:26

1 Answers1

5

you can use CSS3 transition:

jsBin demo

.box {
    background: #1c1c1c;
    padding: 10px;
    margin:20px;
    width: 200px;
    -webkit-transition: -webkit-box-shadow 0.5s ease-out;
    -moz-transition: -moz-box-shadow 0.5s ease-out;
    transition: box-shadow 0.5s ease-out;
}
 
.box:hover {
    -webkit-box-shadow: 0px 0px 15px #444;
    -moz-box-shadow: 0px 0px 15px #444;
    box-shadow: 0px 0px 15px #444;
}

P.S, instead of s (seconds) you can use: ms (millis).

Community
  • 1
  • 1
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • This is much easier to use than the other script he was referencing to. Now all he has to do is add class to each element. – Kyle Monti Apr 29 '12 at 20:09
  • @Kyle Monti -I don't understand, why to add class? What one is the easyest way? – Roko C. Buljan Apr 29 '12 at 20:14
  • 1
    I was considering this, however css3 transitions cut out ie9 and below, which is like 50% of the market, not a very wise idea to use until 9 becomes obsolete, at least not for anything significant. – user1361747 Apr 30 '12 at 04:28