Image pops on with inner HTML; I want it to fade in

JavaScript
1

When an input button is clicked, then an innerHTML is written to a span element, which shows a photo, and the text moves down to accommodate it. However, I’d like the photo to fade in with the innerHTML. Do I do this with Javascript or CSS transitions? I don’t know how to adapt either to this script. I am using innerHTML on a external JS page so it loads quickly without photos, showing only the photos wanted – this is for a mobile app. (Note that I don’t want to include the entire bulk of Jquery just to do this effect.)

HTML:

<div>
<a href="#26" onclick="num26()"><input type="button" value="photo" class="buttonIfmar"></a>
<span id="num26"></span>
<p>text is here</p>
</div>

external JS:

function num26() {
document.getElementById('num26').innerHTML = '<a href="#num26" onclick="displayNone()" alt=""><input type="button" value="close" class="closeButton"></a>'
+ '<img src="photo.jpg" width="350px" style="clear:both;"><br>';
}

function displayNone() {
document.getElementById('num26').innerHTML = '';
}
2

Hi there,

I did a bit of Googling and found a function that does what you want.
Here’s a working example with the code you provided:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Image fade in example</title>
  </head>
	
  <body>
    <div>
      <a href="#26" onclick="num26()"><input type="button" value="photo" class="buttonIfmar"></a>
      <span id="num26"></span>
      <p>text is here</p>
    </div>

    <script>
      function appear(elm, i, steps, speed){
        var t_o;
        i = i || 0;
        steps = steps || 5;
        speed = speed || 50;

        t_o = setInterval(function(){
          opacity = i / 100;
          i = i + steps;
          if(opacity > 1 || opacity < 0){
            clearInterval(t_o);
            return;
          }
          elm.style.opacity = opacity;
          elm.style.filter = 'alpha(opacity=' + opacity*100 + ')';
        }, speed);
      }    

      function num26() {
        document.getElementById('num26').innerHTML = '<a href="#num26" onclick="displayNone()" alt=""><input type="button" value="close" class="closeButton"></a>' + '<img src="photo.jpg" width="350px" style="clear:both;"><br>';
        appear(document.getElementById('num26'), 0, 5, 40);
      }

      function displayNone() {
        appear(document.getElementById('num26'), 100, -5, 40);
        setTimeout(function(){ document.getElementById('num26').innerHTML = '';}, 700)
      }
    </script>
  </body>
</html>

I found the function here: http://stackoverflow.com/questions/2207586/how-do-you-make-something-to-appear-slowly-on-a-page-using-javascript

If you look at the page in question, it is explained a little more.

HTH

3

Wow! Thank you very much!