Question

<!DOCTYPE html>
<html>
    <head>
        <script> 
            $(document).ready(function(){
                $("#flip").click(function(){
                    $("#panel").slideDown("slow");
                });
            });
        </script>
        <style> 
            #panel,#flip {
                padding:5px;
                text-align:center;
                background-color:#e5eecc;
                border:solid 1px #c3c3c3;
            }
            #panel {
                position:absolute;
                padding:50px;
                display:none;
            }
        </style>
    </head>
    <body>
        <div id="flip">Click to slide down panel</div>
        <div id="panel">Hello world!</div>
        <div id="goDown">dddddddd</div>
    </body>
</html>

js Fiddle

我希望第三个div“goDown”与“面板”div同时下降。它的工作原理。没有“位置：绝对;”但我需要这样的。我的问题是，如果这是可能的。感谢。

Answer 1

<强> Demo

JS

  $(document).ready(function () {
      var h = $("#panel").outerHeight();
      $("#flip").click(function () {
          $("#panel").slideDown("slow");
          $("#goDown").animate({marginTop: h}, "slow");
      });
  });

Answer 2

好的，这是一个fiddle。这是你想要的吗？

HTML：

<body>
    <div id="flip">Click to slide down panel</div>
    <div id="panel">Hello world!</div>
    <div id="goDown">dddddddd</div>
</body>

CSS：

#panel,#goDown,#flip {
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel {
    position:absolute;
    padding:50px;
    display:none;
}
#goDown {
    position:absolute;
    padding:50px;
    display:none;
}

JS：

$(document).ready(function(){
     $("#flip").click(function(){
         var left = $("#panel").css('width'); // get left panel width
         left = parseInt(left.substr(0, left.indexOf('p')),10); //parse it so we can add to it
         $("#goDown").css('margin-left', (left + 100)+'px'); // add 100 (double the padding)
         $("#panel").slideDown("slow");
         $("#goDown").slideDown("slow");
     });
 });

Answer 3

这是答案。非常简单和丑陋

  $(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
    $('#goDown').css({"margin-top":"120px"});
  });
});

Answer 4

这是一种更紧凑的方式

$(document).ready(function () {
    $("#flip").click(function () {
        $(this).next().toggle("easeInOutQuint");
    });
});

Demo 该脚本在HTML中查找下一个内容并切换它

Jquery：幻灯片显示绝对定位的div

4 个答案: