jQuery水平手风琴和动画问题

Question

I need to make a horizontal accordion these days. 这些天，我需要制作水平手风琴。

You can see that there is a small "jump" of the color boxes on right hand side when clicking the color box. 您会看到单击颜色框时，右侧的颜色框会出现一个小的“跳跃”。 I don't know why the small "jump" occurs. 我不知道为什么会发生小的“跳跃”。

I then use animate instead of hide and show to try to solve the problem. 然后，我使用动画而不是隐藏和显示来尝试解决问题。

Even if the width animates to 0px, the element still has a few pixels, so I try to hide it after the animation. 即使将宽度设置为0px，该元素仍然具有几个像素，因此我尝试在动画之后将其隐藏。 But the hide() function doesn't do anything. 但是hide（）函数没有任何作用。 Why? 为什么？

During debugging, I find that the alert("good") runs right before the animation ends. 在调试过程中，我发现alert（“ good”）恰好在动画结束之前运行。 Why? 为什么？

Thank you for answering my questions. 感谢您回答我的问题。

Here is the code: 这是代码：

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

Answer 1

I'd suggest you add the following style to the accordion and accordionTitle classes: 我建议您向手风琴和手风琴标题类添加以下样式：

overflow:hidden;

That would at least solve the problem of the width not going to zero. 这至少将解决宽度不为零的问题。

jQuery水平手风琴和动画问题

问题描述

1 个解决方案

解决方案1
0 2009-06-07 09:34:54

jQuery水平手风琴和动画问题

问题描述

1 个解决方案

解决方案1 0 2009-06-07 09:34:54

解决方案1
0 2009-06-07 09:34:54