jQuery How do you get an image to fade in on load?

2019-01-06 13:46发布

站内问答 / jQuery
1038 13 4

All I want to do is fade my logo in on the page loading. I am new today to jQuery and I can't managed to fadeIn on load please help. Sorry if this question has already been answered I have had a look and try to adapt other answers for different question but nothing seems to work and its starting to frustrate me.

Thanks.

Code: 

<script type="text/javascript">                                         
$(function () {
.load(function () {
      // set the image hidden by default    
      $('#logo').hide();.fadeIn(3000);
                                }}                     
 </script>                
    <link rel="stylesheet" href="challenge.css"/>  
<title>Acme Widgets</title>         
  </head>     
  <body> 
     <div id="wrapper"> 
     <div id="header">
     <img id="logo" src="logo-smaller.jpg" /> 
     </div>
      <div id="nav">
      navigation
     </div>
      <div id="leftCol">
      left col
     </div>
      <div id="rightCol">
        <div id="header2">
        header 2
        </div>
        <div id="centreCol">
        body text
        </div>
        <div id="rightCol2">
        right col
        </div>
     </div>
     <div id="footer">
     footer
     </div>
     </div>
  </body>
</html>

13条回答
何必那么认真
2楼-- · 2019-01-06 14:25

window.onload is not that trustworthy.. I would use:

<script type="text/javascript">
    $(document).ready(function () {
        $('#logo').hide().fadeIn(3000);
    });
</script>
查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
3楼-- · 2019-01-06 14:28

To do this with multiple images you need to run though an .each() function. This works but I'm not sure how efficient it is.

$('img').hide();
$('img').each( function(){
    $(this).on('load', function () {
        $(this).fadeIn();
    });
});
查看更多
0人赞 添加讨论(0) 举报
\"骚年 ilove
4楼-- · 2019-01-06 14:29

I tried the following one but didn't work;

    <span style="display: none;" id="doneimg">
        <img alt="done" title="The process has been complated successfully..." src="@Url.Content("~/Content/App_Icons/icos/tick_icon.gif")" />
    </span>

    <script type="text/javascript">
        //$(document).ready(function () {
            $("#doneimg").bind("load", function () { $(this).fadeIn('slow'); });
        //});
    </script>

bu the following one worked just fine;

<script type="text/javascript">
        $(document).ready(function () {
            $('#doneimg').fadeIn("normal");
        });
</script>

            <span style="display: none;" id="doneimg">
                <img alt="done" title="The process has been complated successfully..." src="@Url.Content("~/Content/App_Icons/icos/tick_icon.gif")" />
            </span>
查看更多
0人赞 添加讨论(0) 举报
Rolldiameter
5楼-- · 2019-01-06 14:30

I figure out the answer! You need to use the window.onload function as shown below. Thanks to Tec guy and Karim for the help. Note: You still need to use the document ready function too. 

window.onload = function() {$('#logo').hide().fadeIn(3000);};
$(function() {$("#div").load(function() {$('#div').hide().fadeIn(750););

It also worked for me when placed right after the image...Thanks

查看更多
0人赞 添加讨论(0) 举报
乱世女痞
6楼-- · 2019-01-06 14:35

Simply set the logo's style to display:hidden and call fadeIn, instead of first calling hide:

$(document).ready(function() {
    $('#logo').fadeIn("normal");
});

<img src="logo.jpg" style="display:none"/>
查看更多
0人赞 添加讨论(0) 举报
劫难
7楼-- · 2019-01-06 14:35

Using the examples from Sohnee and karim79. I tested this and it worked in both FF3.6 and IE6.

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

<img src="http://www.gimp.org/tutorials/Lite_Quickies/quintet_hst_big.jpg" id="logo" style="display:none"/>
查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)