jQuery slideToggle 屬性不起作用

Question

slideToggle 應該能夠使用 {direction: "x"} 屬性在所有（向上、向右、向下和向左）方向滑動，但我似乎無法使其正常工作。 切換功能工作正常，但是當我嘗試添加這些屬性時，它就停止工作了。

我試圖讓第一個元素（在這種情況下我的意思是字段集）移出視口到左側，並讓第二個元素從右側移入。

我今天早上剛開始學習 jQuery，但在這一點上我陷入了困境。 任何幫助將非常感激！

這是我的代碼：

 $(document).ready(function() { $("#firstNext").click(function(){ $("#firstBox").slideToggle('slide', function(){ $("#secondBox").slideToggle('slide' , function(){ $(".log").text('You have successfully toggled!'); }); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="#" method="post"> <fieldset id="firstBox"> <label for="naam">Voornaam</label> <input type="text" name="naam" placeholder="naam" value="Jan"> <label for="achternaam">Achternaam</label> <input type="text" name="achternaam" placeholder="achternaam" value="de Vries"> <label for="leeftijd">Leeftijd</label> <input type="text" name="leeftijd" placeholder="leeftijd" value="37"> <div class="next" id="firstNext">Next</div> </fieldset> <fieldset style="display: none" id="secondBox"> <label for="Automerk">Automerk</label> <input type="text" name="Automerk" placeholder="Automerk" value="Audi"> <label for="Type">Type</label> <input type="text" name="Type" placeholder="Type" value="RS6"> <label for="bouwjaar">Bouwjaar</label> <input type="text" name="Bouwjaar" placeholder="Bouwjaar" value="2019"> <div class="next" id="secondNext">Next</div> </fieldset> <fieldset style="display: none" id="thirdBox"> <label for="Vakantieland">Favoriete sport</label> <input type="text" name="Sport" placeholder="Sport" value="Basketbal"> <label for="Team">Favoriete team</label> <input type="text" name="Team" placeholder="Team" value="Boston Celtics"> <label for="Favoriete speler">Favoriete speler</label> <input type="text" name="Speler" placeholder="Favoriete speler" value="Gordon Hayward"> <div class="next" id="thirdNext">Next</div> </fieldset> <fieldset style="display: none" id="fourthBox"> <label for="Voltooi">Klik hier om in te sturen</label> <input type="submit"> </fieldset> </form>

Answer 1

jQuery 中沒有這樣的選項，但jQuery UI 中有。 但是，調用是不同的，使用.toggle()方法（不要與jQuery混淆）。

 $(document).ready(function() { $("#firstNext").click(function() { $("#firstBox").toggle('slide', function() { $("#secondBox").toggle('slide', { direction: "right" }, function() { $(".log").text('You have successfully toggled!'); }); }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <form action="#" method="post"> <fieldset id="firstBox"> <label for="naam">Voornaam</label> <input type="text" name="naam" placeholder="naam" value="Jan"> <label for="achternaam">Achternaam</label> <input type="text" name="achternaam" placeholder="achternaam" value="de Vries"> <label for="leeftijd">Leeftijd</label> <input type="text" name="leeftijd" placeholder="leeftijd" value="37"> <div class="next" id="firstNext">Next</div> </fieldset> <fieldset style="display: none" id="secondBox"> <label for="Automerk">Automerk</label> <input type="text" name="Automerk" placeholder="Automerk" value="Audi"> <label for="Type">Type</label> <input type="text" name="Type" placeholder="Type" value="RS6"> <label for="bouwjaar">Bouwjaar</label> <input type="text" name="Bouwjaar" placeholder="Bouwjaar" value="2019"> <div class="next" id="secondNext">Next</div> </fieldset> <fieldset style="display: none" id="thirdBox"> <label for="Vakantieland">Favoriete sport</label> <input type="text" name="Sport" placeholder="Sport" value="Basketbal"> <label for="Team">Favoriete team</label> <input type="text" name="Team" placeholder="Team" value="Boston Celtics"> <label for="Favoriete speler">Favoriete speler</label> <input type="text" name="Speler" placeholder="Favoriete speler" value="Gordon Hayward"> <div class="next" id="thirdNext">Next</div> </fieldset> <fieldset style="display: none" id="fourthBox"> <label for="Voltooi">Klik hier om in te sturen</label> <input type="submit"> </fieldset> </form> <div class="log"></div>