CODEWITHSUNDEEP
jquerycssanimationcss-transitions
Source
Source

Reputation: 1011

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/

Upvotes: 0

Views: 640

Answers (3)

xong
xong

Reputation: 350

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/

Upvotes: 0

hafiz
hafiz

Reputation: 151

This can be accomplished with pure CSS by adding a trigger on the angle bracket when the link is hovered over.

a:hover > .tag {
      color: orange;
      position: relative;
      left: 15px;
}
a > .tag {
      position: relative;
      left: 0
}
a > .tag, a:hover > .tag {
      -webkit-transition: all 1s ease;
      transition: all 1s ease
}

The CSS > selector is used to select all matching children of a particular element; in this case, we are looking for all elements of class tag that are immediate descendants of anchor elements.

Example: http://jsfiddle.net/gnequ7uq/

Upvotes: 1

Sam Chahine
Sam Chahine

Reputation: 620

Set this: 

.home_view_products a span {
  font-size: 16px;
  padding: 5px;
  position: relative;
  left: 0;
}

And change your JS to this:

$('#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({
    'left': '20px',
  }, 'fast');
});
$('#home_solutions_list li').mouseleave(function() {
  link = $(this).find('.home_view_products a');
  link.stop(true, true).animate({
    'color': '#1a92d0'
  }, 'fast');
  link.find('span').animate({
    'left': '5px'
  }, 'fast');
});

However, I suggest creating a class for hover and offhover, and setting those classes with using CSS selectors rather than any JS. Just a small tip.

Upvotes: 1

Related Questions