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, but there is in jQuery UI. However, the invocation is different, using the .toggle() method (not to be confused with the jQuery one中没有这个选项。

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

jQuery slideToggle 属性不起作用

jQuery slideToggle properties not working

javascript

jquery

animation

slide