Question

美好的一天！

我试图用幻灯片动画隐藏和显示div。我的代码如下：

<style> 
    div.bigBox
            {
            background-color:white;
            width:100px;
            height:125px;
            overflow:hidden;
            }
            div.try{
            background-color:green;
            width:100px;
            height:125px;
            float: left;
            }
            div.try2{
            background-color:yellow;
            width:100px;
            height:125px;
            }
    }   
  </style> 
  <script language="JavaScript" src="js/jquery-1.6.1.js"></script>
  <script src="http://ui.jquery.com/latest/ui/jquery.effects.core.js"></script>
  <script src="http://ui.jquery.com/latest/ui/jquery.effects.slide.js"></script>
</head> 
<body> 
    <div class="bigBox">
          <div class="try">
              <p id="haha">CLICK THIS</p>
              <p>This is a demonstration of jQuery SimpleDialog.</p>
          </div>
          <div class="try2">
              <h3 id="test2">CLICK THIS</h3>
              <p>This is a demonstration of jQuery SimpleDialog.</p>
          </div>
    </div>
<script> 
    $('#haha').click(function () {  
      alert("test");
      $('.try').hide("slide", { direction: "left" }, 1000);
      $('.try2').show("slide", { direction: "right" }, 1000);
    }); 
</script>

问题是一个盒子到另一个盒子的过渡。它流动不顺畅。我想隐藏并同时显示（就像拖尾盒子一样隐藏）。请帮忙。感谢

Answer 1

这种猫可能有十几种方法，但这就是我所做的：

给出bigBox位置：relative
更改了试用框以使用position：absolute以便它们叠加在一起
更改了HTML的顺序，以确保try（而不是try2）保持在最前面;你可以用z-index
删除溢出：隐藏在bigBox上并使背景透明，虽然这不应该真正有所作为
更改CSS以符合我的个人风格;对不起，这是一个半强迫症的事情

小提琴：http://jsfiddle.net/GregP/CV7fd/1/

我没有系统地测试我的理论，但我认为这是造成你问题的浮动。

没有必要显示“切换.try和.try2框的顺序”标记或JavaScript（未触及），但这里是更新的CSS：

div.bigBox {
  background-color:transparent;
  width:100px;
  height:125px;
  position: relative;
}

.try, .try2{
  width:100px;
  height:125px;
  position: absolute;
}

.try {
  background-color:green; 
}

.try2{
  background-color:yellow;
}

（拍摄，可以使用宽度：和高度：在bigBox上也是如此。好吧，你明白了，不需要我迂腐！）

Answer 2

您是否考虑过将这两个元素放在一个div中（部分可见）并通过更改边距，填充或者实现它来滑动它？

Jquery幻灯片动画

2 个答案: