Javascript jQuery水平手风琴与动画问题
这些天我需要做一个水平手风琴 单击颜色框时，您可以看到右侧的颜色框有一个小的“跳跃”。我不知道为什么会发生小的“跳跃” 然后我用动画代替隐藏和显示来解决这个问题 即使宽度设置为0px，元素仍有一些像素，因此我尝试在动画之后隐藏它。但是hide（）函数什么都不做。为什么? 在调试期间，我发现警报（“良好”）在动画结束之前运行。为什么? 谢谢你回答我的问题 代码如下：Javascript jQuery水平手风琴与动画问题,javascript,jquery,Javascript,Jquery,这些天我需要做一个水平手风琴 单击颜色框时，您可以看到右侧的颜色框有一个小的“跳跃”。我不知道为什么会发生小的“跳跃” 然后我用动画代替隐藏和显示来解决这个问题 即使宽度设置为0px，元素仍有一些像素，因此我尝试在动画之后隐藏它。但是hide（）函数什么都不做。为什么? 在调试期间，我发现警报（“良好”）在动画结束之前运行。为什么? 谢谢你回答我的问题 代码如下： <html> <head> <style type="text/css"> .accordion
<html>
<head>
<style type="text/css">
.accordion { padding: 3px; margin: 0px; float: left; width: 300px;}
.accordionTitle { cursor: pointer; padding: 3px; margin: 0px; float: left;width:20px; height:150px; }
.clearBoth { clear: both; }
</style>
<script src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" >
$(function() {
var elementToTransform = ".accordion"
$(elementToTransform).hide();
var currentAccordionPanel = ($(".currentAccordionPanel").show())[0];
$(".accordionTitle").click(function() {
if ($(this).next(elementToTransform)[0] != currentAccordionPanel)
{
$(currentAccordionPanel).hide(400);
$(this).next(elementToTransform).show(400);
/*$(currentAccordionPanel).animate({width:"0px"},{duration:200,queue:false},{},function(){alert("good")});
$(this).next(elementToTransform).animate({width:"300px"},{duration:200,queue:false});
$(currentAccordionPanel).hide(); // the element still has few pixels even width animates to 0, so I hide it
*/
currentAccordionPanel = $(this).next(elementToTransform)[0];
}
})
});
</script>
</head>
<body>
<div style="width:800px;">
<div id="cat1">
<div class="accordionTitle" style="background:blue">1</div>
<div class="accordion currentAccordionPanel" id="p1">content 1</div>
</div>
<div id="cat2">
<div class="accordionTitle" style="background:red">2</div>
<div class="accordion" id="p2">content 2</div>
</div>
<div id="cat3">
<div class="accordionTitle" style="background:yellow">3</div>
<div class="accordion" id="p3">content 3</div>
</div>
<div id="cat4">
<div class="accordionTitle" style="background:green">4</div>
<div class="accordion" id="p4">content 4</div>
</div>
<div id="cat5">
<div class="accordionTitle" style="background:red">5</div>
<div class="accordion" id="p5">content 5</div>
</div>
<div class="clearBoth"></div>
</div>
</body>
</html>
.accordion{padding:3px；margin:0px；float:left；width:300px；}
.accordionTitle{光标：指针；填充：3px；边距：0px；浮点：左；宽度：20px；高度：150px；}
.clearTheals{clear:tweals；}
$（函数（）{
var elementToTransform=“.accordion”
$（elementToTransform）.hide（）；
var currentAccordionPanel=（$（“.currentAccordionPanel”）.show（））[0]；
$（“.accordionTitle”）。单击（函数（）{
if（$（this）.next（elementToTransform）[0]！=currentAccordionPanel）
{
$（currentAccordionPanel）.hide（400）；
$（this）.next（elementToTransform）.show（400）；
/*$（currentAccordionPanel）.animate（{width:“0px”}，{duration:200，queue:false}，{}，function（）{alert（“good”）}）；
$（this.next（elementToTransform）.animate（{width:“300px”}，{duration:200，queue:false}）；
$（currentAccordionPanel）.hide（）；//即使宽度设置为0，元素仍有少量像素，因此我将其隐藏
*/
currentAccordionPanel=$（this）.next（elementToTransform）[0]；
}
})
});
1.
内容1
2.
内容2
3.
内容3
4.
内容4
5.
内容5
overflow:hidden;