why isn't this javascript fade in working?

not sure what's wrong here but just trying to do a simple fade in upon the page loading.

script in the head tag:

<script>
$("#header").delay(100).animate({"opacity": "1"}, 700);
</script> 

CSS:

#header {
    height: 100%;
    width: 100%;
    background-image:url(door.jpg);
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;
    opacity: 0;
}

Answers


Wrap your code in DOM ready

$(function() {
    $("#header").delay(100).animate({"opacity": "1"}, 700);
});


.ready()


Try moving the script to a dom ready handler

jQuery(function(){
    $("#header").delay(100).animate({"opacity": "1"}, 700);
})

Call it when DOM is ready. Write:

$(document).ready(function(){
    $("#header").delay(100).animate({"opacity": "1"}, 700);
});

Need Your Help

Cocoa Image Compression with NSImage

objective-c image macos cocoa image-compression

I am writing a small Mac app to resize and compress jpeg files. So far I was able to resize the image properly. But I cannot compress the image (Reduce the image quality). My code is given below.

Android Retrofit GET request ConversionException issue

android json gson retrofit

I'm using Retrofit to make REST requests and create the corresponding model objects (with gson using the @SerializedName annotation). There is one particular GET request that occasionally causes a