jQuery幻灯片动画
Posted
技术标签:
【中文标题】jQuery幻灯片动画【英文标题】：Jquery slide animation 【发布时间】：2011-11-14 02:53:38 【问题描述】：美好的一天！
我正在尝试使用幻灯片动画隐藏和显示 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>
问题是一个盒子到另一个盒子的过渡。它的流动不是很顺畅。我想隐藏并同时显示（例如拖尾要隐藏的框）。请帮忙。谢谢
【问题讨论】：
与问题无关：在关闭样式标签之前，您有一个额外的右花括号。相关：这里有一个小提琴（jQ 1.7，使访问 jQ UI 更容易），任何人都可以尝试：jsfiddle.net/GregP/CV7fd 【参考方案1】：可能有十几种方法可以给这只猫剥皮，但我是这样做的：
给出大框位置：相对 将尝试框更改为使用 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 上使用 width: 和 height:。嗯，你明白了，我没必要学究气！）
【讨论】：
（也是 FWIW，我认为褪色看起来也很整洁：jsfiddle.net/GregP/CV7fd/2） 你有一个滑块代码，我可以在其中使用 css 溢出：隐藏；？因为我上面代码的功能仅限于2个可移动的盒子。 Tnx 溢出：隐藏不是我所做的必要更改。我刚刚测试过，不管有没有都很好。很容易测试...只需访问小提琴！【参考方案2】：您是否考虑过将两个元素放在一个 div 中（这将是部分可见的）并通过更改边距、填充或您实现它来滑动它？
【讨论】：
好的，我认为您需要另一个（包装器和容器），但尝试将这些 CSS 规则添加到其中，看看会发生什么： margin-left: -100px;宽度：200px；如果这两个值可以与页面上的其他元素一起使用，我的想法是为这两个值设置动画。以上是关于jQuery幻灯片动画的主要内容，如果未能解决你的问题，请参考以下文章