jQuery幻灯片动画 [英] Jquery slide animation
问题描述
美好的一天！
我正在尝试使用幻灯片动画隐藏和显示div. 我的代码如下:
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
推荐答案
可能有十几种方法可以给这只猫换皮，但这是我做的:
There are probably a dozen ways to skin this cat, but here's what I did:
- 赋予bigBox位置:相对
- 将尝试框更改为使用位置:绝对位置，以使它们彼此堆叠
- 更改了HTML的顺序，以确保将try(而不是try2)放在最前面；您可以使用z-index等其他方式
- 已消除溢出:隐藏在bigBox上并使其背景透明，尽管这不应该诚实地有所作为
- 更改了CSS以适合我的个人风格；抱歉，这是半OCD的事情
小提琴: 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.
没有显示切换.try和.try2框的顺序"标记或JavaScript(未修改)的地方，但这是更新的CSS:
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;
}
(拍摄，也可以在bigBox上使用width:和height:.嗯，您明白了，不需要我学究！)
(shoot, could've used the width: and height: on bigBox, too. Ah well, you get the point, no need for me to be pedantic!)
这篇关于jQuery幻灯片动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
