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

我试图制作一个按钮，当单击该按钮时，显示的动画是两个三角形的幻灯片，但当我尝试使用.toggle（'slide'）命令时，它会执行类似于.show（）或.hide（）的操作，而且需要单击两次才能完成所有操作，我希望它在1中工作。我将JQuery放在下面，但我的完整代码在这里或这里。我建议看一下CodePen，因为JSFIDLE对我来说有问题

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

---

jquery函数切换没有“slide”参数，请参见文档中的，因此：

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

试试看：

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

---

我想是那样的。。愿它有帮助。。您可以尝试在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);
   }
  });
});

---

请尝试以下我的代码：

$（文档）.ready（函数（）{
$（'#buttondiv'）。单击（函数（）{
$（“#三角形”）.animate（{“左边距”：“0px”）show（）；
$（'#triangle2'）。设置动画（{“左边距”：“0px”）.show（）；
});
});
/*正文{
背景颜色：灰色；
}*/
#纽顿迪夫{
背景：蓝色；
文本对齐：居中；
填充：0px；
颜色：白色；
宽度：200px；
高度：70像素；
字体大小：25px；
位置：绝对位置；
最高：50%；
左：50%；
边缘顶部：-45px；
左边距：-100px；
边界：无；
字体系列：“龙虾”，草书；
}
#三角{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：35px 0 35px 50px；
边框颜色：透明白色；
位置：绝对位置；
显示：无；
左边距：-100px；
}
h1{
颜色：白色；
位置：相对位置；
文本对齐：居中；
底部：28px；
文本阴影：0px 0px 5px红色；
}
#三角形2{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：35px 0 35px 50px；
边框颜色：透明蓝色；
位置：绝对位置；
左：200px；
显示：无；
左边距：-100px；
}

@ArunPJohny它看起来没有什么不同。滑动切换（“慢”）怎么样？

？我已经试过了，它只是让它看起来像一个.fadeIn（）或.fadeOut（）效果，而不是滑动。你有没有试过使用动画？@Joshua，我不认为你正在寻找的按钮的那种动画，与您可以使用的动画相匹配。toggle（）…我发现：[，看看是否有帮助：我在代码中尝试了它，但它仍然看起来像。show（）我希望它看起来像是滑动的，尽管没有褪色