0

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;
    }
}
4

1 に答える 1

1

問題はラインにあります

var titledelay = setInterval(show_title_animation(position),30);

関数にパラメーターを渡す代わりに、次のように関数参照のみを渡す必要があります。

var titledelay = setInterval(show_title_animation, 30); // This would require position declared as global variable outside the scope of the function

または var titledelay = setInterval(function(){ show_title_animation(position) }, 30);

于 2012-07-14T16:30:33.570 に答える