Javascript 关于jquery中toggle（）效果和事件的混淆

我有两个div元素“trigger”和“target”。我在寻找一种机制，在这种机制中，每次单击“触发器”时，脚本都会为“目标”的高度设置动画。但是我需要它在0px和100px之间切换。经过研究，我发现

搜索了一下，我发现了下面的脚本

$("#trigger").toggle(function(){
    $("#target").animate({height:40},200);
},function(){
    $("#target").animate({height:10},200);
});

 $(document).ready(function()
    {$("#trigger").click(function()
 {
  $('#target').toggle(
function()
 {
  $('#target').animate({height: "250"}, 1500);
 },
function()
  {
   $('#target').animate({height: "0"}, 1500);
  });
 });
});

然而，它似乎不起作用。。经过进一步的搜索，我发现了以下脚本

$("#trigger").toggle(function(){
    $("#target").animate({height:40},200);
},function(){
    $("#target").animate({height:10},200);
});

 $(document).ready(function()
    {$("#trigger").click(function()
 {
  $('#target').toggle(
function()
 {
  $('#target').animate({height: "250"}, 1500);
 },
function()
  {
   $('#target').animate({height: "0"}, 1500);
  });
 });
});

---

这也没用。该元素确实会设置动画，但随着高度的增加，宽度和不透明度也会设置动画。进一步的研究使我产生了效果。所以基本上有两个toggle（）。在jquery中，我不知道如何使用它们。我所要做的就是在单击另一个元素时使用切换来设置一个元素高度的动画。我希望我已经说得够清楚了

您只需添加一个变量，如

var trigger=false

var trigger = false;

$("#trigger").click(function(){
    if(!trigger) {
        $("#target").animate({height:40},200);
        trigger = true;
    }
    else {
        $("#target").animate({height:10},200);
        trigger = false;
    }
});

您可以使用
toggleClass
：

$("#trigger").click(function() {
  $(".target").toggleClass("higher");
});

然后在css中使用：

.target {
  height:50px;
  background-color:#f00;
  -webkit-transition: height 1s;
  -moz-transition: height 1s;
  -ms-transition: height 1s;
  -o-transition: height 1s;
  transition: height 1s;
}
.higher {
  height:100px;
}

jQuery的
.toggle（）
函数有两种不同的形式。一个是每次单击时切换的，另一个是切换元素可见性的。第一个在不久前被删除了。是的，在1.9中删除了：哦，我不知道。这正是让我困惑的地方。