JavaScriptに関してはまだ初心者ですが、ユーザーがカーソルをその上に置いたときに、本質的に下から画像の上にスライドさせたいdivをアニメーション化するのに問題があります。ほぼ同じコードを使用して div をフェード インおよびビューから外すことに成功しましたが、何らかの理由でこのコンテキストでは機能したくありません。
echo '
<div class="still" style="clear:left">
<div class="thumbnail" onmouseover="show_title('.$work['position'].');" onmouseout="hide_title('.$work['position'].');">
<div class="still_title" id="still_title'.$work['position'].'">
<br>'.$work['title'].'
</div>
<a href="'.$work['vimeo'].'" rel="shadowbox"><img src="'.$work['thumbnail'].'" class="still_img"></a>
</div>
<div class="description"><p>'.$work['description'].'</p>
</div>
</div>
';
そして、ここに私が問題を抱えているJavaScriptがあります..
var i = 0;
function show_title(position) {
var titledelay = setInterval(show_title_animation(position),30);}
function show_title_animation(position) {
still_id = "still_title" + position;
title_position = document.getElementById(still_id);
while (i<100) {
i++;
title_position.style.height = i + "px";
}
if (i==100) {
alert(title_position);
clearInterval(titledelay);
}
}
編集:現在は機能していますが、ループが完了した後はリセットされません..
var i = 0;
function show_title(position) {
var titledelay = setInterval(function(){ show_title_animation(position); }, 10);
}
function show_title_animation(position) {
still_id = "still_title" + position;
title_position = document.getElementById(still_id);
while (i<50) {
i++;
title_position.style.height = i + "px";
break;
}
if (i==50) {
clearInterval(titledelay);
i=0;
}
}