Question

I want to fade in some images while hidden on page load with CSS (display: none;).
This works fine on Firefox, Chrome, Safari,
On Opera (last version: 12.12), the img are shown randomly…

Here is the Jquery code:

$(document).ready(function () {
        $('img:hidden').load(function () {
            $('img:hidden').fadeIn(1000);
        });
    });

Has anybody an idea of why it’s randomly working on Opera ?

Thanks

Answer 1

First of all, “load” event triggers better, if an image is visible.
Besides, from my own experience, in some cases (IE for example) the following trick helps to solve an issue.

$(document).ready( function() {

  if ( $.browser.opera ) {
    $('img:hidden').each( function() {
      $('img:hidden').fadeIn(1000);
    });
  }
  else {
    $('img:hidden').load( function() {
      $('img:hidden').fadeIn(1000);
    });
  }

});