把一段文字放在jquery动画的边上

Question

我发现这个帖子Animate like button when click on it，但是我想知道我怎么可以放一段动画文本。

我想：

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

& &

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

但文本过来动画... 我只是想在动画的右侧的文本。 如何做到这一点？

Answer 1

下面是您正在尝试做的小提琴的更新代码片段。

$(".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>

Answer 2

可以使用2周的div。一个用于心脏，一个用于文本。然后在CSS中使用position：relative或position：absolute来与alignmente一起玩。

也许你还需要玩Z指数，所以你要确保心脏在后面。

在这个例子中，我的心只是一个方形。原理是一样的。

.heart { 
 
    border: 1px solid black; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 
.text { 
 
    position: absolute; 
 
    left: 20px; 
 
    top: 25px; 
 
}

<div class="heart"></div> 
 
<div class="text">Love</div>