如何在jQuery animate（）中使用box-shadow？

Question

I have a an li element which needs to animate to box shadow on hover but I am not able to get the desired results here is my javascript code:

$(document).ready(function () {
$('#skill_list li').hover(function () {
    $(this).animate({
        top: "-5px",
        boxShadow: "10px 10px red"
    }, 100, "linear").clearQueue();
}, function () {
    $(this).animate({
        top: "0px",
        boxShadow:"0px 0px"
    }, 100, "linear").clearQueue();
})
});

Thankyou

Answer 1

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. It includes multiple shadow support.

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

Using CSS

.element{
  transition: all 0.8s ease-in;
  width: 50px;
  height: 50px;
  border: 1px solid black;
}
.element:hover {
  box-shadow: 0px 0px 5px 3px hsla(100, 70%, 60%, 0.8); 
}

Answer 2

Add this in your css and add it wherever you want

 body{ background: #fff; } .box { transition: box-shadow .3s; width: 300px; height: 500px; margin: 50px; border-radius:10px; border: 1px solid #ccc; background: #fff; float: left; } .box:hover { box-shadow: 0 0 11px rgba(33,33,33,.2); }