css animation for text color and moving text, with jquery example

I am trying to animate my text color, and have an > move about 15px to the right after the text on hover. I think this is possible with css, but not sure where to start.

$('#home_solutions_list li').mouseenter(function() {
  link = $(this).find('.home_view_products a');
  link.stop(true, true).animate({
   'color': '#636a6d'
  }, 'fast');
  link.find('span').animate({
   'padding-left': '20px'
   }, 'fast');
});

So the color should change (not working jsfiddle), and then the span element after should move to the right of the text. But ONLY the span element should move, currently as the text is centered, the link text is also moving. Can this just be done simply in css?

http://jsfiddle.net/Q8KVC/2278/

Answers 1

  • If you don?t want to move the centered text, you have to make sure that the span element is out of the flow. I would position it relative. The animation with css is done with left:20px on hover:

    .home_view_products a span {
      position:relative;
      left:0;
      font-size: 16px;
      padding: 5px;
      -webkit-transition:padding-left 0.2s, color 0.2s;
      transition:left 0.2s, color 0.2s;
    }
    
    #home_solutions_list li:hover span {
      left:20px;
      color:#636a6d;
    }
    

    See http://jsfiddle.net/1j7dzfda/3/


Related Articles