Question

我有两个div元素“trigger”和“target”。我正在寻找一种机制，每次点击“触发器”时，脚本都会激活“目标”的高度。但是我需要它在0px和100px之间切换。经过一些研究，我发现了this

稍微搜索一下，我找到了以下脚本

$("#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);
  });
 });
});

这也不起作用。该元素确实具有动画效果，但随着高度的增加，宽度和不透明度也会生成动画。进一步的研究使我受到this的影响。所以基本上有两个toggle（）。在jquery中，我对每个如何使用感到困惑。我想要做的就是在单击另一个元素时使用切换为一个元素的高度设置动画。我希望我已经足够清楚了。

Answer 1

您只需添加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;
    }
});

Answer 2

您可以改为使用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;
}

http://jsfiddle.net/JSfa3/

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

2 个答案: