css - 将 div 固定在具有负边距的特定位置，然后在单击按钮时对其进行动画处理。

Question

我的情况有些复杂:

这是一个尝试解释它的 fiddle :http://jsfiddle.net/sqSj9/1/

我想做的是将三个 div 放在固定位置，左、上和右边距为负(如此隐藏)，只要我点击一个按钮，它们就会以动画方式出现在页面中间。我开始在一个单独的文件夹中进行尝试，它运行良好。我得到了你可以在 fiddle 中看到的结果，(所以是的， fiddle 就是我想要完成的)

但是一旦我将代码放入我的实际网站代码中，首先点击时什么也没有出现，所以动画不起作用。

当我删除 position:fixed 时，动画开始出现，但是出现的 div 插入了后面的 div，所以让我们在 fiddle 中说:白色 div 将灰色 div 推到底部，而不是隐藏它。

所以我最后的解决方案是放置 position:absolute 。当我这样做时，动画工作正常，但问题是现在，当我点击按钮时，div 是动画的但不填满我的浏览器的大小，这意味着，假设我已经向下滚动了一点此外，当我单击按钮进行动画处理时，动画发生了，但我看不到它。我必须再次向上滚动才能看到它。

这是另一个 fiddle 来说明我的意思。向下滚动并尝试:http://jsfiddle.net/6xJhC/3/

所以我确定我的初始代码有问题，我不应该添加的东西，但我无法弄清楚它是什么!以下是我的代码的相关部分:

我的 html:

 <?php include 'header.php';?>

    <!-- this is where the header ends and index starts-->
        <div id="container">
    <div id="intro">
       <!-- some content-->
    </div>

    <div id="content">
      <section id="def">    
         <!-- some content-->
      </section>

      <div id="selected-program">
          <div id="top">  
              <!-- some content-->
          </div>

          <div id="left">
              <!-- some content-->
          </div>

          <div id="right">
              <!-- some content-->
          </div>
     </div>

     <section id="program">
        <button id="click" value="click Me"> click me </button>
        <!-- some content-->
     </section>

     <section id="rec">
        <!-- some content-->
     </section>

     <section id="testi">
        <!-- some content-->
     </section>

     <section id="contact">
         <!-- some content-->
     </section>


<?php include 'footer.php';?>

我的代码:

<script type="text/javascript">

$(document).ready(function(){
    var allowScroll = true;

$("body").on('mousewheel DOMMouseScroll',function(e){   // this code prevents scrolling whenever the button is clicked is clicked
    if (!allowScroll){
        e.preventDefault();
    }
});
$("#click").click(function(){
    $("#top").animate({marginTop:'0px'},200);
    $("#left").animate({marginLeft:'0px'},200);
    $("#right").animate({marginRight:'0px'},200);
});
});
</script>

我的CSS:

body, html{
    margin:0;
    padding:0;
    background: #fff;
    margin-bottom: 25px;
    overflow-x: hidden;
}

#container{
    padding-top:80px;
}

#intro{
    background:url(images/main.jpg) no-repeat;
    background-size: cover;
    height:492px;
    color: #fff;
    position:fixed;
    z-index: 0;
    width:100%;
}

#content{
    z-index: 600;
    position: relative;
    margin-top: 492px;
    background: #fff;
}

#program {
    height:700px;
}

#rec{
    height:140px;
    background: #f6f6f6;
}

#recommand{
    width:490px;
    padding-top:20px;
    margin:auto;
    height:100px;
}

#testi {
    height:700px;
}

section{
    border-bottom:1px solid;
    border-color:#eee;
    padding-left:130px;
}

#selected-program{
    z-index: 100000;
}

#top{
    width:100%;
    height:80px;
    margin-top:-120px;     
    background: #f6f6f6;
    position:absolute;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
}

#left{
    left:0%;
    margin-left:-859px;
    padding-left:130px;
    padding-top:30px;
    width:860px;
    height:603px;
    margin-top:80px;
    float:left;
    position:absolute;
    background:#fff;
}

#right{
    right:0%;
    margin-right:-449px;
    float:right;
    height:633px;
    width:449px;
    margin-top:80px;
    border-left:1px solid #eee;
    position:absolute;
    background: #fff;
}

因此，我们将不胜感激任何帮助。

提前致谢。

Answer 1

好的，让我们看看这里，这没有使用您的代码，我知道这行得通!

所以我们将要隐藏的div设置到position: fixed;然后使用left将它们隐藏起来，右和顶部。

从这里开始就像设置一些 jQuery(或 Javascript).click 来告诉隐藏的 div 出来一样简单。简单如。

因此，单击屏幕上的任意位置以调出隐藏的 div，然后再次单击以隐藏它们。向下滚动并单击它们将仍然在屏幕上，因为我们 position: fixed。

弄乱它以了解它的工作原理等。

注意: 对于我的动画，我使用了 CSS transition。

HTML:

<div></div>
<div></div>
<div></div>
<div>Scroll Down and Click</div>
<div>Scroll Down and Click</div>
<span></span>

CSS:

html, body {
    margin: 0;
}
div:nth-child(1) {
    width: 200px;
    height: 400px;
    border: 1px solid;
    background: #ddd;
    position: fixed;
    left: -401px;
    -webkit-transition: left 2s;
    transition: left 2s;
}
div:nth-child(2) {
    width: 400px;
    height: 200px;
    border: 1px solid;
    background: #ddd;
    position: fixed;
    top: -401px;
    left: 0;
    right:0;
    margin: auto;
    -webkit-transition: top 2s;
    transition: top 2s;
}
div:nth-child(3) {
    width: 200px;
    height: 400px;
    border: 1px solid;
    background: #ddd;
    position: fixed;
    right: -401px;
    -webkit-transition: right 2s;
    transition: right 2s;
}
div:nth-child(4) {
    width: 100%;
    height: 500px;
    border: 1px solid;
    background: blue;
}
div:nth-child(5) {
    width: 100%;
    height: 500px;
    border: 1px solid;
    background: purple;
}
span {
    height: 1000px;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
}

jQuery:

$("span").click(function () {
    var clicks = $(this).data('clicks');
    if (clicks) {
        $("div:nth-child(1)").css("left", "-401px");
        $("div:nth-child(2)").css("top", "-401px");
        $("div:nth-child(3)").css("right", "-401px");
    } else {

        $("div:nth-child(1)").css("left", "0");
        $("div:nth-child(2)").css("top", "0");
        $("div:nth-child(3)").css("right", "0");
    }
    $(this).data("clicks", !clicks);
});

DEMO HERE