javascript not modifying style properties sequentially
<p>I'm trying to implement a photo gallery using fade functions. I've gone through many so lets use <a href="http://www.scriptiny.com/2011/01/javascript-fade-in-out/" rel="nofollow">this one</a> as an example. </p>

<p>I've been trying to get my code to work in IE 8 where the amount of stacked images with <code>opacity:0</code> makes the animations laggy (single images fade smoothly). What solves this problem is to do <code>display:none</code> on the image after its faded out. The problem that arises now is that my images disappear instantly and not after the finished animation. Is there a way to fix this?</p>

<p>My modified demo code:</p>

<pre><code>&lt;div class="button" onclick="

    if(boole)
        document.getElementById('fade').style.display = '';

    fadeEffect.init('fade', boole?1:0);

if(!boole)
        document.getElementById('fade').style.display = 'none';

    boole = !boole;

"&gt;Fade In&lt;/div&gt;
</code></pre>
