head内でjQueryを読み込んでおきます。
cssとhtmlを用意しておきます。
divのようなボックス要素を用意してその中にふきだしの要素を入れておきます。
ふきだしの箱となるdivはposition:relativeして、ふきだしはposition:absoluteを指定し、
位置なども指定しておきます。
.box{position: relative;background-color:gray;width: 200px;height: 200px;margin: auto;}
#red{background-color:maroon;}
.hukidashi{position: absolute;
color:white;
top:-20px;/*この値とEndPの値を合わせてください */
left:-30px;
width: 100px;height: 100px;
border-radius:50px 50px 0 50px;
text-align:center;
background-color: black;display: none;}
<divclass="box">
<div class="hukidashi">
ふきだし
</div>
</div>
<div id="red" class="box">
<div class="hukidashi">
ふきだし
</div>
</div>
jsです。bodyの直前にでも読み込ませてあげてください。
/*ーーーーーーーーーーーーーーー*/
var Move = 20; //ふきだしの移動量
var EndP = -20; //ふしだしの初期y座標位置
var Repeat = 10; //繰り返し回数
var speed = 400; //アニメーションの速度/ms
/*ーーーーーーーーーーーーーーー*/
$(".box").hover(function(){
for(var i = 0 ; i < Repeat ; i++){
$(this).find(".hukidashi").show()
.animate({top:"+="+Move+"px"},speed);
$(this).find(".hukidashi").animate({top:"-="+Move+"px"},speed);
}
},
function(){
$(this).find(".hukidashi").css({
display:"none",
top:""+EndP+"px"
});
});
Demo:
