javascript - 隐藏一个元素并同时更改样式 css

Question

我正在处理我的作品集，需要帮助#blind 一个元素并同时更改底部元素的样式属性。

想法是在两个元素之间存在一个固定的空间，就像这个 EXAMPLE

如果您在单击时看到该示例，则会出现一个栏，并且两个栏之间的空间仍然存在。然后如果你再次点击元素隐藏并且空间保持不变!

"#contacts"-> 我想隐藏的元素

"#line"-> 我要更改顶部属性的元素

我正在尝试使用名为“blind”的 jquery 函数来解决:

   $("#contacts").toggle("blind", {direction : "vertical"}, 500);

然后我用 if 得到 #line 的最高值:

   var line = $( "#line" ); 
   var  position = line.position(); 
   var top = position.top;
   if(top == value){
   $("#line").animate({top:'100px'}, time);
   } else { ... }

请帮忙!!

Answer 1

我会在没有 jQuery UI 的情况下使用 top 值和 z-index

var contactTop = 85,
    nextTop;
$(".oppen").click(function() {
        nextTop = nextTop !== contactTop ? contactTop : 5;
        $("#contacts").animate({top: nextTop}, 500);
    .....

Demo

要停止排队，除了使用 jQuery 的 .stop 之外，您还可以在 #line 上应用相同的技术

var contactTop = 85,
    nextTop,
    lineStart = 100,
    lineEnd = 180,
    lineTop = 100;
$(".oppen").click(function() {
    nextTop = nextTop !== contactTop ? contactTop : 5;
    $("#contacts").stop().animate({top: nextTop}, 500);
    lineTop = lineTop !== lineStart ? lineStart : lineEnd;
    $( "#line" ).stop().animate({top:lineTop}, 500);
});

Demo