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を使用することができます。 1つは心臓に、もう1つはテキスト用です。次に、CSSの使用位置で：相対または位置：アライメントで再生する絶対。

多分、心臓が背中にあることを確認するために、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>