javascript - 如何滑动 div 并在每次单击 google-slide 时显示不同的内容？

Question

每次单击“toogle-slide”按钮时，我都会尝试在 div 之间切换。另外，每次单击切换按钮时，另一个按钮应该隐藏/显示。

html代码:

<div id="divParticipants">
click 'on' to hide the button and show the second content 
</div>
<div id="divPackage" style='display:none'>
click 'off' to hide the button and hide first content 
</div>

<button type="button" id='add-new'>
another button 
</button>

JavaScript 代码:

$(function () {
        $('#package-toogle').change(function () {
            $('#divParticipants').hide("slide", { direction: "right" }, 400, function () {
               $('#add-new').hide(); 
            });

            $('#divPackage').show("slide", { direction: "left" }, 400, function () {
                $('#add-new').show();
            });
        })
    });

我花了半个小时试图让它工作，但没能让它工作。如果您能展示如何操作，我将不胜感激。这是 jsfiddle 链接。

https://jsfiddle.net/p9qarjg0/36/

Answer 1

尝试使用切换。

      $(function () {
        $('#package-toogle').on('change', function () {
            $('#divParticipants').toggle("slide", { direction: "right" }, 400, function () {
            });

            $('#divPackage').toggle("slide", { direction: "left" }, 400, function () {
            });
          $('#add-new').toggle();
        })
    });