Adelson6789 Adelson6789 - 7 months ago 22
Javascript Question

Put a text in side of jquery animation

I found this post Animate like button when click on it, but I want to know how I can put a text side of animation.

I tried:

<div class="heart">TEXT</div>


&&

<div class="heart"><p>TEXT</p></div>


But the text come over the animation...
I just want the text in right side of animation.
How to make this ?

Answer

Here is an updated snippet base on the fiddle you are trying to do.

$(".heart").on('click touchstart', function(){
  $(this).toggleClass('animating');
});


$(".heart").on('animationend', function(){
  $(this).toggleClass('animating');
});
.heart {
  float:left;
  margin-top: -1em;
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-image:url(  'https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png');
  background-position: left;
  background-repeat:no-repeat;
  background-size:2900%;
 }

 .heart:hover {
  background-position:right;
 }

 .animating {
  animation: heart-burst .8s steps(28) 1;
 }

 @keyframes heart-burst {
 from {background-position:left;}
 to { background-position:righ;}
 }
<div class="heart-container">
  <div class="heart"></div>
  <p>TEXT</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Comments