2015-04-13 50 views
0

我一直想在一段時間後讓圖像淡出。我查看了Stackoverflow中找到的相同主題,但我不想工作。定時淡出不起作用

如果有人可以快速瀏覽一下我的代碼,我會非常感激嗎?

我想褪色的圖像是:

我的代碼:

<!DOCTYPE html> 
<html lang="en"> 
<head> 

    <!-- Basic Page Needs 
    –––––––––––––––––––––––––––––––––––––––––––––––––– --> 
    <meta charset="utf-8"> 
    <title>ACC BIC - Business Industry Description</title> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <!-- Mobile Specific Metas 
    –––––––––––––––––––––––––––––––––––––––––––––––––– --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <!-- FONT 
    –––––––––––––––––––––––––––––––––––––––––––––––––– --> 
    <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css"> 

    <!-- CSS 
    –––––––––––––––––––––––––––––––––––––––––––––––––– --> 
    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/skeleton.css"> 

    <!-- Favicon 
    –––––––––––––––––––––––––––––––––––––––––––––––––– --> 
    <link rel="icon" type="image/png" href="images/favicon.png"> 

</head> 
<body> 

    <!-- Primary Page Layout 
    –––––––––––––––––––––––––––––––––––––––––––––––––– --> 
    <div class="container"> 
    <div class="row"> 
     <div class="twelve columns"> 
     <!-- Bottom bar navigation --> 
     <div class="btn btn-two"> 
      <span class="btn-two--link"><a href="#.html"></a></span> 
      <span class="btn-three--link"><a href="selection-5.html"></a></span> 
      <span class="btn-four--link"><a href="index.html"></a></span> 
      <img id="myImage" class="email-sent-img" src="images/email-link-sent.png" alt=""> 
      <script> 
      $(window).load(function(){ 
    setTimeout(function(){ $('#myImage').fadeOut() }, 5000); 
}); 
      </script> 
     </div> 
     <!-- Background image --> 

     <img class="proto-img" src="images/cards-view-selected.png" alt=""> 
     </div> 
    </div> 
    </div> 

<!-- End Document 
    –––––––––––––––––––––––––––––––––––––––––––––––––– --> 

</body> 
</html> 

回答

1

。你有你的頁面的jQuery代碼的鏈接。它看起來並不像您所擁有的那樣,因此計算機無法理解事件或$("#myImage").fadeOut()方法的 $(window).load()事件。爲了解決這個問題只需添加這行代碼到你的頁面級

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script> 

頭部分如果你希望使用jQuery的更高版本,你可以看看jQuery的網站上了解更多信息。 如果這仍然不起作用,請嘗試用$("#myImage").fadeTo("slow",0)替換$("myImage").fadeOut()

希望這會有所幫助。

0

嘗試

$(window).on('load', function() { 
    setTimeout(function() { 
     $("#image").fadeOut("slow", function() { // Instead of Slow you could add 5000 (5s) 
      // fade out complete if you need to run another event 
     }); 
    }, 5000); // fade out starts after 5s 
});