頁面加載後第一次快速淡入

我用jQuery製作了一個工具提示。但是，第一次（在頁面加載正確後），即使我已經應用了延遲500（毫秒，我想？），工具提示沒有延遲出現。爲什麼會發生這種情況？頁面加載後第一次快速淡入

<html> 
<head> 
    <script src="file://C:/Users/Admin/Desktop/jquery-1.8.3.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $("input").focus(function(){ 
       $("#div").fadeIn(500).css("background-color","#B0B0B0"); 
      }); 
      $("input").blur(function(){ 
       $("#div").fadeOut(500).css("background-color","#B0B0B0"); 

      }); 
      $("input").keyup(function(){ 
       $("#div").html($("input").val()); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div style="width:150px"> 
     <input type="text" style="width:100%;border-radius:4px;border:1px solid #808080;padding:1%;font-family:calibri"/> 
     <div id="div" style="color:#FFF;font-family:calibri;min-height:20px;border-radius:4px;padding:1%;word-wrap:break-word"></div> 
    </div> 
</body>

來源

2013-01-10 Sumit Gera

可能愚蠢的評論，但你確實設置你的div顯示：沒有在你的CSS，但只是忘了把它放在你的代碼片段？ – mikakun

因爲您已將其設置爲默認可見？嘗試在div上設置'display：none'，這樣它就會隱藏起來。 –

@all謝謝你們。 –

隱藏它第一次。我建議你使用它JS這樣

$("input").focus(function(){ 
    $("#div").hide() 
    $("#div").fadeIn(500).css("background-color","#B0B0B0"); 
});

這樣，如果用戶有JS殘疾人做，他仍然會看到DIV，只是沒有淡入效果。

來源

2013-01-10 20:44:35 xbonez

您有display:none隱藏它開始。

style="display:none";

然後，您將它帶入您的動畫視圖中。

<div id="div" style="display:none;color:#FFF;font-family:calibri;min-height:20px;border-radius:4px;padding:1%;word-wrap:break-word"></div>

見this answer是更好的通過JavaScript來隱藏漸進enhancment但理論是一樣的。

來源

2013-01-10 20:43:21

一個不錯的變種。 –

@SumitGera歡呼。 –

因爲你沒有隱藏它，它已經顯示。

此行添加到您的腳本文件準備好功能：

$("#div").hide();

來源

2013-01-10 20:43:36

將項目設置爲none，然後在頁面加載時爲該項目創建fadeIn（500）。

此外，你應該考慮清理你的jQuery。例如：

$(window).on('load',function(){ 
    var $div = $('#div'); 

    $('input').on({ 
     focus: function(){ 
      $div.fadeIn(500).css({backgroundColor:"#B0B0B0"}); 
     }, 
     blur: function(){ 
      $div.fadeOut(500).css({backgroundColor:"#B0B0B0"}); 
     }, 
     keyup: function(){ 
      $div.html($(this).val()); 
     }, 
     load: function(){ 
      $div.fadeIn(500); 
     }, 
    }); 
});

未經測試，但沿着這些線應該工作。

來源

2013-01-10 20:51:19 PlantTheIdea

頁面加載後第一次快速淡入

回答

相關問題