0

I want to use jQuery to slowly fade in a inset box shadow.
I don't want to use a css3 transition, so please don't suggest it.

My html:

<ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Ingredients</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

The jQuery i've tried:

$(document).ready(function() {
    $('.nav li').fadeIn('1000', function () {
    $(this).css('boxShadow', 'inset', '0px', '0px', '5px', '2px', '#EBEBEB' );
    });
});
Tim Cloak
  • 1
  • 1
    http://stackoverflow.com/questions/4133366/correct-way-to-animate-box-shadow-with-jquery The accepted answer is appropriate here – Dormouse Jun 30 '13 at 09:18
  • You can follow this link http://stackoverflow.com/questions/4133366/correct-way-to-animate-box-shadow-with-jquery – Ichigo Kurosaki Jun 30 '13 at 09:34

1 Answers1

-1

You can use .animate instead of .css. It might not be work as you are applying .animate function to box-shadow so You can use box-shadow animate plug-in to work across the browser.

Jay Shukla
  • 5,794
  • 8
  • 33
  • 63
  • `.animate()` only animates sacalar (numeric) values. Seeing as `box-shadow` has no longhand properties this isn't possible – Bojangles Jun 30 '13 at 09:32