Question

我试图制作一个按钮，当点击显示动画时，两个三角形滑入，但当我尝试使用.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>

Answer 2

我找到了那种方式..可能有帮助..你可以尝试在css中使用不透明度和在jquery中使用animate（）

$(document).ready(function(){
  $('#buttondiv').click(function(){
   if($(this).find('#triangle').css('opacity') == 0)  {
      $('#triangle,#triangle2').animate({'opacity': 1},1000);
   }else{
        $('#triangle,#triangle2').animate({'opacity': 0},1000);
   }
  });
});

JSFIDDLE

Answer 3

jquery函数切换没有＆＃39;幻灯片＆＃39;参数，请参阅文档中的here，以代替：

$('#triangle').toggle('slide', 'slow');

尝试：

$('#triangle').toggle('slow');

JQuery .toggle（'slide'）不滑动它看起来更像.show（）或.hide（）

3 个答案: