0

当谈到 javascript 时，我仍然是一个新手，但我无法为 div 设置动画，当用户将光标移到图像上时，我想从底部向上滑动图像。我已经成功使用几乎相同的代码将 div 淡入和淡出视图，但由于某种原因，它不想在这种情况下工作。这是它的 html/php 方面：

            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 回答