javascript - JQuery Fade In after Delay - Stack Overflow

admin管理员组

文章数量:1355540

I am trying to get my main logo image to fade in (using Jquery) after a certain delay.

The script actually works fine EXCEPT that when you 1st load the page, the ENTIRE page falls under style="display:none"

I ONLY want the logo to display:none not the entire page. Is there something I am missing? Some tag I am not closing? Here is the link: My Website And here is the code [Javascript]:

`<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
        $('#logo').delay(1500).fadeIn(1500);
});
</script>

And here is the HTML:

<img src="img/made_clothes2.png" class="clothingLogo" id="logo" style="display:none;" />
<center><ul class="social">
    <li><a href=""><img src="img/facebook.png" class="social"></a></li>
    <li><a href=""><img src="img/twitter.png" class="social"></a></li>
    <li><a href="/"><img src="img/tumblr.png" class="social"></a></li>
    <li><a href=""><img src="img/instagram.png" class="social"></a></li>
</ul></center>

As it stands now, when the page load NOTHING shows until the delay.fadeIn() is executed... I want the other "social" images to load and the #logo to load independently on its on [using the delay.fadeIn()].

Thanks, [edited: I fixed the img tag and ul tag, but still no go on the image "social" images loading]

I am trying to get my main logo image to fade in (using Jquery) after a certain delay.

The script actually works fine EXCEPT that when you 1st load the page, the ENTIRE page falls under style="display:none"

I ONLY want the logo to display:none not the entire page. Is there something I am missing? Some tag I am not closing? Here is the link: My Website And here is the code [Javascript]:

`<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
        $('#logo').delay(1500).fadeIn(1500);
});
</script>

And here is the HTML:

<img src="img/made_clothes2.png" class="clothingLogo" id="logo" style="display:none;" />
<center><ul class="social">
    <li><a href="http://www.facebook./madeclothiers"><img src="img/facebook.png" class="social"></a></li>
    <li><a href="http://www.twitter./madeclothiers"><img src="img/twitter.png" class="social"></a></li>
    <li><a href="http://www.madeclothiers.tumblr./"><img src="img/tumblr.png" class="social"></a></li>
    <li><a href="http://web.stagram./n/madeclothiers"><img src="img/instagram.png" class="social"></a></li>
</ul></center>

As it stands now, when the page load NOTHING shows until the delay.fadeIn() is executed... I want the other "social" images to load and the #logo to load independently on its on [using the delay.fadeIn()].

Thanks, [edited: I fixed the img tag and ul tag, but still no go on the image "social" images loading]

• javascript
• jquery
• html
• delay
• fadein

Share Improve this question Follow edited Sep 27, 2012 at 21:59 paulcruse3 asked Sep 27, 2012 at 21:36 paulcruse3paulcruse3 18922 silver badges2020 bronze badges 4

• 1 img is an empty tag and should not have the closing tag. And also center is very, very deprecated – Matt Whipple Commented Sep 27, 2012 at 21:39
• @MattWhipple Nope that didn't work, I originally thought that was the problem, so I that is why I included that </img> tag – paulcruse3 Commented Sep 27, 2012 at 21:42
• Works fine for me : jsfiddle/johnkoer/f9G6h/4 but you should fix the img tag. – John Koerner Commented Sep 27, 2012 at 21:45
• Maybe remove the "display:none;" from the style and use $("#logo").hide(); before the fade in? – Kaizen Programmer Commented Sep 27, 2012 at 22:07

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

updated answer, one which actually works modify your jquery script to the following

$(document).ready(function() {
        $('#logo').css({ opacity: 1});
});

add this to your css

.clothingLogo {
    opacity: 0.001;
    transition: opacity 1.5s 1.5s;
    -moz-transition: opacity 1.5s 1.5s;
    -webkit-transition: opacity 1.5s 1.5s;
    -o-transition: opacity 1.5s 1.5s;
    -ms-transition: opacity 1.5s 1.5s;
    -khtml-transition: opacity 1.5s 1.5s;
}

remove all styling from image

<img src="img/made_clothes2.png" class="clothingLogo" id="logo" />

tested firefox and chrome, if you want you can find some other way to express opacity for antique ie versions...

there is no </img> tag. make it <img src="img/made_clothes2.png" class="clothingLogo" id="logo" style="display:none;" />.

The browser probably chokes on that and therefore doesn't display anything else.

I found your problem. In your stylesheet you set:

ul.social{
  list-style-type: none;
  margin-top: -12%;   // <- problem is here
  text-aling: center;
}

when #form is hidden, ul.social is at the top of the page. with margin-top: -12% it is 12% above the visible area........

PS: send beer and cake to my house AND VALIDATE YOUR HTML!

just a thought but I suggest you set width and height for that logo image in your css, and also try using opacity: 0.001 instead of display: none in it's style, you might find it works better because the image gets a download request the moment the browser hits the img tag, not when jquery starts switching opacity

<img src="img/made_clothes2.png" class="clothingLogo" id="logo" style="opacity: 0.001; width: 1024px; height: 768px;" />

Actually img tag should be as follows

<img src="img/made_clothes2.png" class="clothingLogo" id="logo" style="display:none;" />

and you can use following javascript instead

<script type="text/javascript">
    $(document).ready(function() {
        setTimeout(function(){
            $('#logo').fadeIn(1500);
        }, 1500);
    });
</script>

And also your <ul> tag should have a closing tag like </ul> and use css/style to center your ul instead of using deprecated <center>.

本文标签： javascriptJQuery Fade In after DelayStack Overflow