I have this piece of code:

2. $('#portfolio ul li').mouseenter(function(){
3. 
   
4.         $('.overlay', this).stop().animate({
5.             opacity: '0.5'
6.         }, 250, 'easeInOutQuint');
7. 
   
8.         $('.overview', this).stop().animate({
9.             top: '50%',
10.             left: '50%',
11.             margin: '-50 0 0 -125'
12.         }, 250, 'easeInOutQuint');
13. 
    
14.         $('.link', this).stop().animate({
15.             bottom: '50%',
16.             right: '50%',
17.             margin: '-50 -125 0 0'
18.         }, 250, 'easeInOutQuint');
19. 
    
20.         $('.overview', this).add('.link', this).mouseenter(function(){
21.             $(this).stop().animate({
22.                 color: '#e74b3c'
23.             }, 300, 'easeInOutQuint');
24.         });
25. 
    
26.         }).mouseleave(function(){
27. 
    
28.             $('.overlay', this).stop().animate({
29.                 opacity: '0'
30.             }, 250, 'easeInOutQuint');
31. 
    
32.             $('.overview', this).stop().animate({
33.                 top: '50%',
34.                 left: '-100',
35.                 margin: '-50 0 0 0'
36.             }, 250, 'easeInOutQuint');
37. 
    
38.             $('.link', this).stop().animate({
39.                 top: '50%',
40.                 right: '-100',
41.                 margin: '-50 0 0 0'
42.             }, 250, 'easeInOutQuint');
43. 
    
44.             $('.overview', this).add('.link', this).mouseleave(function(){
45.                 $(this).stop().animate({
46.                     color: '#FFFFFF'
47.                 }, 300, 'easeInOutQuint');
48.             });
49. 
    
50.         });

The first question is how can I simplify the code, to stay DRY.

The second question is how can I animate an icon that is just animated. When the mouse enter in the parent element ( <li> ), these icons (  $('.overview') and  $('.link') ) slide respectively from right and left to the center. What I want is that when the mouseenter on an icon, this become red with an animation.

Actually, if I enter on the <li> element and on the icon (while it is moving), the icon become red and remains red. I think that this code need an optimization...

Thank for your availability.