0

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

Kashyap Pavra
  • 1
  • 1
  • 2
    What are your desired results? What is actually happening when you run the code you have? – Ryan Wilson May 02 '18 at 17:19
  • I know you've asked for a jQuery solution, but would you be open to a css only solution? [jQuery is widely known to be quite slow when it comes to animation performance](https://css-tricks.com/myth-busting-css-animations-vs-javascript/#article-header-id-1\) – Ghostrydr May 02 '18 at 17:50
  • @RyanWilson the box shadow is not animating,when I inspect the element I see the position property being changed but not the box shadow – Kashyap Pavra May 02 '18 at 19:14
  • @Ghostrydr sure I can try css also,actually I am learning jquery so I wanted solution in jQuery – Kashyap Pavra May 02 '18 at 19:15
  • @KashyapPavra probably because in your second .animate() you don't change the boxShadow property, in fact, it is not there at all. – Ryan Wilson May 02 '18 at 19:16
  • @RyanWilson even after changing boxShadow in 2nd animate() does not show any effect – Kashyap Pavra May 02 '18 at 19:29
  • @KashyapPavra Please update your post to reflect what you changed in the 2nd animate() – Ryan Wilson May 02 '18 at 19:30
  • @RyanWilson I have made the changes in the post – Kashyap Pavra May 03 '18 at 13:52

2 Answers2

0

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); 
}
Gautam Naik
  • 8,990
  • 3
  • 27
  • 42
-1

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); 
}
Alfredo Limon
  • 1
  • 1