0

「トリガー」と「ターゲット」の 2 つの 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);
  });
 });
});

これもうまくいきませんでした。要素はアニメーション化されますが、高さとともに、幅と不透明度もアニメーション化されます。さらなる調査により、私はこの趣旨にたどり着きました。したがって、基本的に 2 つの toggle() があります。jqueryで、それぞれがどのように使用されているかについて混乱しています。私がやりたいのは、別の要素がクリックされたときにトグルで 1 つの要素の高さをアニメーション化することだけです。私は十分に明確であることを願っています。

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 に答える