javascript - JQuery .toggle ('slide' ) 不滑动它看起来更像 .show() 或 .hide()

Question

我正在尝试制作一个按钮，当单击该按钮时会显示一个动画，其中有两个三 Angular 形滑入，但是当我尝试使用 .toggle('slide') 命令时，它会执行类似于 .show() 或 .hide( )，也需要单击 2 次才能完成所有操作，我希望它在 1 中工作。我将我的 JQuery 放在下面，但我的完整代码在这个 CodePen 中。或者这个 JSfiddle我建议查看 CodePen，因为 JSfiddle 对我来说有问题。

$(document).ready(function(){
  $('#buttondiv').click(function(){
    $('#triangle').toggle('slide', 'slow');
    $('#triangle2').toggle('slide', 'slow');
  })
});

Answer 1

请试试我的代码:

$(document).ready(function(){
  $('#buttondiv').click(function(){
    $('#triangle').animate({"margin-left": "0px"}).show();
    $('#triangle2').animate({"margin-left": "0px"}).show();
  });
});

/*body {
  background-color:gray;
}*/

#buttondiv {
  background: blue;
  text-align:center;
  padding:0px;
  color:white;
  width:200px;
  height:70px;
  font-size:25px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-45px;
  margin-left:-100px;
  border:none;
  font-family: 'Lobster', cursive;
}

#triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px 0 35px 50px;
  border-color: transparent transparent transparent white;
  position:absolute;
  display:none;
  margin-left:-100px;
}

h1 {
  color:white;
  position:relative;
  text-align:center;
  bottom:28px;
  text-shadow:0px 0px 5px red;
}

#triangle2 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 35px 0 35px 50px;
  border-color: transparent transparent transparent blue;
  position:absolute;
  left:200px;
  display:none;
  margin-left:-100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#'>
  <div id='buttondiv'>
  <div id='triangle2'></div>
  <div id='triangle'></div>
  <h1>Click</h1>
  </div>
</a>