Jquery slide animation

2019-08-03 22:00发布

站内问答 / jQuery
798 2 6

Good day!

I am trying to hide and show divs with slide animation. My code is as follows:

<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>

The problem is the transition of one box to another. It doesn't flow very smoothly. I want to hide and at the same time show (like tailing the box to be hidden). Please help. Thanks

2条回答
爷、活的狠高调
2楼-- · 2019-08-03 22:31

Have you considered having both elements in a single div (which would be partially visible) and just slide it by changing margins, padding or however you implement it?

查看更多
0人赞 添加讨论(0) 举报
劳资没心，怎么记你
3楼-- · 2019-08-03 22:32

There are probably a dozen ways to skin this cat, but here's what I did:

  • Gave the bigBox position: relative
  • Changed the try boxes to use position: absolute so that they stack on top of one another
  • Changed the order of the HTML to make sure try (not try2) stays on top; you could do this other ways like with z-index
  • Removed overflow: hidden on bigBox and made background transparent, although that shouldn't honestly make a difference
  • Changed the CSS to suit my personal style; sorry, it's a semi-OCD thing

Fiddle: http://jsfiddle.net/GregP/CV7fd/1/

I didn't methodically test my theory, but I THINK it was the floating that was causing your problem.

No point showing the "switching the order of the .try and .try2 boxes" markup or the JavaScript (which is untouched), but here's the updated 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;
}

(shoot, could've used the width: and height: on bigBox, too. Ah well, you get the point, no need for me to be pedantic!)

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)