Question

当谈到javascript时，我仍然是一个新手但是我在设置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;
    }
}

Answer 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）;

使用javascript动画div高度调整

1 个答案: