jquery - 如何將等待/加載gif圖像放在div的頂部？

我需要將中包含的wait.gif放在另一個div上一段時間。jquery - 如何將等待/加載gif圖像放在div的頂部？

我有2個問題：

我要怎麼定位在DIV的頂部等待圖像。
我的setTimeout不起作用。

這裏是我的代碼：

<html> 
<head> 
<style type="text/css"> 
html, body { 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
} 

#div1 { 
margin-left: 10px; 
margin-top: 10px; 
background-color: #F0F0F0; 
width: 300px; 
height: 300px; 
} 

#btnLoad { 
margin-left: 10px; 
margin-top: 10px; 
} 
</style> 
<script type="text/javascript" src="jquery1.6.4min.js"> </script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#waiting").hide(); 
}); 

$(function() { 
function goFoo() { 
    var width = $("#div1").outerWidth(); 
    var height = $("#div1").outerHeight(); 

    $("#waiting").css({ 
    postion: "absolute", 
    top: height + 10 + "px", 
    left: width + 10 + "px" 
    }).show(); 
    $("#div1").html($("#waiting")); 
    setTimeout(goFoo, 5000); 
} 

$("#btnLoad").click(function() { 
    goFoo(); 
    $("#div1").css('background-color', '#FDF5E6'); 
}); 
}); 
</script> 
</head> 
<body> 
<div id="div1"> </div> 
<div id="waiting" ><img src="wait.gif" /> </div> 
<input type="button" id="btnLoad" value="Click" /> 
</body> 
</html>

注：www.jsfiddle.net正在維護這就是爲什麼我貼我的所有代碼。

來源

2012-03-09 NinjaBoy

你是什麼意思？你想調整圖像嗎？ – Fabian 2012-03-09 08:48:43

我希望圖像位於div的中心。我想讓它像你在等待表重新加載時一樣工作。 – NinjaBoy 2012-03-09 08:53:22

超時應該有一個函數裏面，否則它會立即執行。 setTimeout（function（）{xxxx}，5000）;

如果你想在div1上定位，使用z-index css屬性。

來源

2012-03-09 08:46:09 Bjarne77

嘗試使用以下的setTimeout

setTimeout(function() {$("#div1").css('background-color', '#FDF5E6')}, 5000);

的setTimeout期望的功能，而不是一個執行功能。有關更多信息，請參閱https://developer.mozilla.org/en/DOM/window.setTimeout。

來源

2012-03-09 08:46:59

我更新了我的問題。 – NinjaBoy 2012-03-09 08:53:53

在當前的例子中，goFoo永遠不會運行...反正，如果他們幫助你，給人+1，不要改變你的問題，這只是令人沮喪的每個人都投入:-) – 2012-03-09 19:46:53

要將圖像放置在另一個元素的上方，您可以使用position:absolute;和z-index。有關信息，請參閱：http://www.w3schools.com/css/css_positioning.asp。

您setTimeout不工作，因爲它需要一個功能，如：

setTimeout(function(){$("#div1").css('background-color', '#FDF5E6');}, 5000);

來源

2012-03-09 08:47:02 m90

我更新我的問題。 – NinjaBoy 2012-03-09 08:53:45

'position：absolute;'元素的父元素仍然需要'position：relative;' – m90 2012-03-09 09:02:08

給DIV1一個position:relative財產
給人以等待display:none屬性，而不是隱藏它的jQuery的
給予等待position:absolute propert Ÿ

然後按鈕加載事件：

$('#btnLoad').click(function() { 
    $(this).append($('#waiting').css({top:10, left:10}); 
});

來源

2012-03-09 08:49:16

剛剛加入我的jQuery插件elementOverlay到github上。它沒有記錄，並且100％測試過，但應該工作。

下面的代碼放在一個覆蓋來一張表格，直到阿賈克斯後已完成：

var overlay = $('#yourForm').elementOverlay({title: '<img src="wait.gif" />'}); 
$.post('/some/action', $('#yourForm').serialize(), function(data) { 
    overlay.elementOverlay('hide'); 

    // handle response 
});

它使用jQueryUI的樣式覆蓋。

https://github.com/jgauffin/griffin.jquery.tools/blob/master/Source/Plugins/jquery.griffin.elementoverlay.js

來源

2012-03-09 08:53:08 jgauffin

jquery - 如何將等待/加載gif圖像放在div的頂部？

回答

相關問題