css opacity transition on click
17:44 19 Jun 2013

Is there some way I can get this image to fade in using the CSS transition defined? Right now it's just popping to the full opacity. 

var makeImage = function() {
    $('#image').remove();

    $(document.body).append('');

    var img = $('#image')[0];
    console.log(img.style);
    img.style["opacity"] = 1;
  };
.fadeIn {
    opacity: 0;
    -moz-transition: opacity 5.5s ease 0.300s;
    -webkit-transition: opacity 5.5s ease 0.300s;
    -o-transition: opacity 5.5s ease 0.300s;
    transition: opacity 5.5s ease 0.300s;
  }

Fade Example

edit: I realize there is a fadeIn function provided by jquery. I regret using jquery in this example as the point was to do it using the CSS transition properties.

jquery html css transition