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的顶部？

回答

相关问题