Databases
StackOverflow2013
Postsdbo
POAnimate opacity on image load
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAnimate opacity on image load
    primarykey
    data
    text
    <p>I have tried a bunch of different solutions to similar problems on here but none of them seem to be doing anything for me. See my jsFiddle to see an example of what I would like to happen: <a href="http://jsfiddle.net/Amp3rsand/HSNY5/6/" rel="nofollow">http://jsfiddle.net/Amp3rsand/HSNY5/6/</a></p> <p>It animates how I would like but it relies on .delay when I would prefer it to fire as soon as the image is finished loading. The commented out sections in the js are the things that I have tried. </p> <p>Could the problem be that the image is actually the background of a div rather than its own element? I tested making it its own <code>&lt;img&gt;</code> tag as well but it didn't seem to make a difference. I have the image as the background so that when I use media queries it is easy to swap in a different, smaller image for mobile users or small screens.</p> <p>HTML:</p> <pre><code>&lt;header&gt;&lt;/header&gt; &lt;div id="image"&gt; &lt;div id="blah"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The image I would like to fire after it finishes loading is the background of '#image'. Then I would like for it to animate to 'opacity:1;' while '#blah' and 'header' are animated into place.</p> <p>Here is the jQuery I'm using right now but it is not correct:</p> <pre><code>$('#image').hide().delay(800).fadeTo(600, 1); $('#blah').css("left", "-650px").delay(1400).animate({left:'30px'},400); $('header').css("top", "-150px").delay(2000).animate({top:'-5px'},400); </code></pre> <p>On my website it is quite a large image so it takes about half a second to load but this code doesn't take into account caching or different network speeds.</p> <p>What am I doing wrong or what should I do differently?</p> <p>Thanks everyone</p> <hr> <p>EDIT:</p> <p>I gave the imagesLoaded plugin a go earlier and it seems to work on my website but I can't tell if it is actually doing what I want or just emulating my code from above.</p> <pre><code>$(document).ready(function() { $('body').hide().fadeTo(500, 1) }); imagesLoaded( document.querySelector('#homeimg'), function( instance ) { $('article').hide().fadeTo(600, 1); $('#caption').css("left", "-650px").delay(800).animate({left:'30px'},400); $('header').css("top", "-150px").delay(1400).animate({top:'-5px'},400); }); </code></pre> <p>'#homeimg' being the div with the image as the background and 'article' being the container for '#homeimg' and '#caption'</p> <p>I can only test with the website loaded locally at the moment so I can't simulate a slow connection. Does the code above do what I am looking for? Sorry if it should be obvious</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAmpersand
    1. USAmpersand
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COhttps://github.com/desandro/imagesloaded
      singulars
      1. POAnimate opacity on image load
      1. USTushar Gupta
    2. COI have seen this as a solution for a bunch of other questions so I put together a version that works but I can't tell if it is doing what I really want. See my edit if you want to see what I mean
      singulars
      1. POAnimate opacity on image load
      1. USAmpersand
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload