Javascript Jquery如何使用show effect为多个div指定方向？_Javascript_Jquery_Html

Javascript Jquery如何使用show effect为多个div指定方向？

javascript jquery html

Javascript Jquery如何使用show effect为多个div指定方向？,javascript,jquery,html,Javascript,Jquery,Html,我对一些jQuery代码有一个问题，我试图在表单中显示一些字段，但只有当用户单击“是”时，这些字段才会出现，而当用户单击“否”时，这些字段才会隐藏。这是可行的，但当它显示字段时，它会将它们一个接一个地装入。我试着给它指明方向，但不起作用。这是我的密码： <!DOCTYPE html> <html> <head> <style> div { background:#def3ca; margin:3px; width:80px; display:non

我对一些jQuery代码有一个问题，我试图在表单中显示一些字段，但只有当用户单击“是”时，这些字段才会出现，而当用户单击“否”时，这些字段才会隐藏。这是可行的，但当它显示字段时，它会将它们一个接一个地装入。我试着给它指明方向，但不起作用。这是我的密码：

<!DOCTYPE html>
<html>
<head>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<label> Do you want to create a new entry?  </label>
<button id="showr" type="button" >YES</button>
<button id="hidr" type="button" >NO</button>
<br/>

<div class="mydiv">
 <label> Field #1 
 <span class="small">Describe your field</span>
 </label>
 <textarea  rows="10" cols="40" name="" id=""  ></textarea>
</div>

<div class="mydiv">
 <label> Field #2
 <span class="small">Describe your field</span>
 </label>
 <textarea  rows="10" cols="40" name="" id=""  ></textarea>
</div>


<script>
$("#showr").click(function () {
$("div").first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});
});

$("#hidr").click(function () {
$("div").hide(1000);
});
</script>

</body>
</html>


背景：def3ca；边距：3px；宽度：80px；
显示：无；浮动：左；文本对齐：居中；}
是否要创建新条目？
对
不


字段#1
描述你的领域
字段#2
描述你的领域
$（“#showr”）。单击（函数（）{
$（“div”）.first（）.show（“fast”，函数showNext（））{
$（this.next（“div”）.show（“fast”，showNext）；
});
});
$（“#hidr”）。单击（函数（）{
$（“div”）.hide（1000）；
});

如果有人有想法，请让我知道，谢谢将此添加到您的风格中：

.mydiv{ clear:both;}

你说的方向是什么意思

要获得所需的结果（包括居中），请使用以下CSS：

.mydiv {
    background:#def3ca;
    margin: 0 auto;
    width:400px;
    text-align:left;
    clear:both;
    display: none;
}
.mytext {
    text-align:center;
}
.wrapper {
    display:block;
}

使用以下标记：

<div class="wrapper">
    <label>Do you want to create a new entry?</label>
    <button id="showr" type="button">YES</button>
    <button id="hidr" type="button">NO</button>
    <br/>
    <div class="mydiv">
        <label>Field #1 <span class="small">Describe your field</span>

        </label>
        <div class="mytext">
            <textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
        </div>
    </div>
    <div class="mydiv">
        <label>Field #2 <span class="small">Describe your field</span>

        </label>
        <div class="mytext">
            <textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
        </div>
    </div>
</div>

确定方向。您当前的请求模棱两可。我希望从上到下显示每个字段，而不是彼此相邻，JSFIDLE没有显示正确的视图，但无论如何，谢谢！。。。谢谢，成功了！但是现在我的div在左边，我怎么能把它们居中呢？嗨，克里斯托弗，谢谢你的帮助，但我要问你一件事，当我点击“是”时，它会从左边跳到中间，当我点击“否”时，它会一直出现在左边，还有一个问题是，当我点击“是”时，如何将窗口推到底？@cyberjas2001，你最好写一个新问题

$("#showr").click(function () {
    $(".mydiv").show("fast");
});

$("#hidr").click(function () {
    $(".mydiv").hide(1000);
});