javascript - Jquery toggle 仅在 toggle() 中使用参数时才更改 div 顺序

Question

我有这些 div

<div id="fechaPartida">
            <label>Partida </label>
            <input type="text" class=".ui-icon-calendar dates" name="date" id="dateSV"  value="" /> 
        </div>
        <span id="hideit">
        <div id="fechaRegreso"> 
            <label>Regreso</label>
            <input type="text" class=".ui-icon-calendar dates" name="date" id="dateFV" value="" />
        </div>
        </span>
        <div id="soloIda">
            </br>
            <input type="checkbox" class="" name="" id="soloIdaCheck" value=""/> Solo ida
        </div>

我正在隐藏并显示（切换）带有跨度“hideit”的div。它切换得很好

$('#soloIdaCheck').click(function(){
        $('#hideit').toggle();

});

但我希望 jquery 使用 toggle('slow') 为您提供很酷的效果，但是当我这样做时，div 顺序会发生变化，因为我隐藏的 div 现在是最后一个

检查此图像以更好地理解它

这是 div 的 CSS

#fechas{
    width:100%;
    height:50px;
}

#fechaPartida{
    float:left;
    width:170px;
}
#hideit{
    display:inline-block;
}
#fechaRegreso{
    float:left;
    width:150px;
}
#soloIda{
    padding-top:5px;
    float:left;
    width:80px;
}

Answer 1

您可以使用event.preventDefault()：

说明：如果调用该方法，则不会触发事件的默认动作。

$('#soloIdaCheck').click(function(){
        event.preventDefault();
        $('#hideit').toggle();    
}); 

Answer 2

这对我来说似乎可以使用$('#hideit').toggle("slow");

http://jsfiddle.net/dazziep/EYbDd/

Answer 3

只是改变了一些小东西......似乎在我的工作正常，不知道这是否有帮助？

HTML

<div id="fechaPartida">
    <label>Partida</label>
    <input type="text" class=".ui-icon-calendar dates" name="date" id="dateSV" value="" />
</div>
<div id="fechaRegreso" class="hideit">
    <label>Regreso</label>
    <input type="text" class=".ui-icon-calendar dates" name="date" id="dateFV" value="" />
</div>
<div id="soloIda">
    <input type="checkbox" class="" name="" id="soloIdaCheck" value="" />Solo ida
</div>

javascript

$('#soloIdaCheck').click(function () {
    $('.hideit').toggle("slow");
});

css

#fechas {
    width:100%;
    height:50px;
}
#fechaPartida {
    float:left;
    width:170px;
}
#hideit {
    display:inline-block;
}
#fechaRegreso {
    float:left;
    width:150px;
}
#soloIda {
    padding-top:20px;
    margin-left:10px;
    float:left;
    width:80px;
}

编辑：-抱歉刚刚阅读了其他评论，您的订单不再有问题..我的坏.. DOH！

Answer 4

这是最好的视觉解决方案：http: //www.learningjquery.com/2009/02/slide-elements-in-different-directions

横向滑动比慢速效果更漂亮。我知道这是一个品味问题，但绝大多数最终用户都拥有这种品味。