0

我有两个 div 元素“触发器”和“目标”。我一直在寻找一种机制，每次单击“触发器”时，脚本都会为“目标”的高度设置动画。但是我需要它在 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);
  });
 });
});

这也不起作用。元素确实会产生动画，但随着高度、宽度和不透明度也会产生动画。进一步的研究使我得出了这个结论。所以基本上有两个toggle()。在 jquery 中，我对每个如何使用感到困惑。我想要做的就是在单击另一个元素时通过切换为一个元素的高度设置动画。我希望我已经足够清楚了。

4

2 回答 2

2

您可以添加一个变量，例如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;
    }
});
于 2013-06-26T10:20:55.097 回答
0

您可以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/

于 2013-06-26T10:51:19.797 回答