У меня есть элемент 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();
})
});
Спасибо
Использование плагина jQuery Эдвина Мартина для анимации теней, который расширяет метод .animate, вы можете просто использовать обычный синтаксис с "boxShadow" и всеми его аспектами - цветом, смещением по x и y, blur-radius и spread-radius — анимируются. Он включает поддержку нескольких теней.
$(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);
}
Добавьте это в свой css и добавьте куда хотите
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);
}