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让你使用切换（'慢'）但是当我这样做时，div命令会改变，因为我隐藏的div现在是最后一个

检查此图片以便更好地理解

enter image description here

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

水平滑动比慢速效果更漂亮。我知道这是一个品味问题，但绝大多数最终用户都有共同的品味。

仅当在toggle（）中使用参数时，Jquery切换才会更改div顺序

4 个答案: