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

Question

我有一个li元素，需要在悬停时设置动画效果，但我无法在此处获得所需的结果是我的javascript代码：

$(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();
})
});

三江源

Answer 1

直接回答

使用扩展.animate方法的Edwin Martin jQuery plugin for shadow animation ，您只需使用＆＃34; boxShadow＆＃34;以及 - 颜色， x和y偏移，模糊半径和展开半径 - 获得动画效果。它包括多个影子支持。

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

使用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

在您的css中添加此内容并将其添加到您想要的任何位置

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;