Question

I’m still a newbie when it comes to javascript but I am having trouble animating a div that I want to essentially slide up over an image from the bottom when a user runs their cursor over it. I have had success using an almost identical code to fade a div in and out of view, but for some reason it does not want to work in this context.. Here is the html/php side of it:

            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>
            ';

And here is the javascript that I’m having an issue getting to function properly..

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

Edit: It works now but it isn’t resetting after it completes the loop..

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

The problem is with the line

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

Instead of passing a function with parameter, you should only pass in a function reference, like

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

or
var titledelay = setInterval(function(){ show_title_animation(position) }, 30);