(JQuery)Offset()坐标?

时间:2012-02-09 16:43:35

标签: jquery

$(".div1").hide();
$(".div2").offset( $(".div1").offset() ).slideDown();

offset()似乎将元素RELATIVE的当前cordinates返回给文档。精细。但是当我尝试使用offset(value)来设置元素的坐标时,它会相对于元素的当前位置而不是文档来进行。

在示例代码中,我尝试将div2放在div1的相同位置。

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html> 

<style>

div{margin-bottom: 2px; height: 70px}
.red{background-color: red}
.blue{background-color: blue}
.green{background-color: green}
.orange{background-color: orange}
.pink{background-color: pink}

.msg{background-color: skyblue; border: 1px solid black; border-radius: 5px; display: none}
</style>

<script type="text/javascript" src="/scripts/jquery-1.6.2.min.js"></script>
<script>
$(function(){   
    $(".msg").offset( $(".blue").offset() ).slideDown(); 

});
</script>

<body>

<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="orange"></div>
<div class="pink"></div>

<div class="msg">
    TEST
</div>

</body>

</html>

1 个答案:

答案 0 :(得分:2)

问题是因为你是第一次隐藏.div1,因此无法访问它。如下所示更改您的代码,它将起作用:

$(".div2").offset( $(".div1").offset() ).slideDown();
$(".div1").hide();

我已经在jsFiddle中测试了这个功能,但是当他们正在更改主机时,无法链接到它。