javascript - オンクリックが機能しない

Question

このコードが onclick として機能しないのはなぜですか?

$('.mainz11').click (function() {
    $(this).animate({
        height: '280px'
    }, 800);
}, function() {
    $(this).animate({
        height: '100px'
    }, 800);
});

Answer 1

最初に要素を展開してから縮小しようとしている場合、おそらく次のようになります。

$('.mainz11').click(function() {
    // determine target heights
    if ($(this).hasClass("expanded")) {
            var targetHeight = 100;
    } else {
        var targetHeight = 280;
    }

    // animate
    $(this).animate({
        height: targetHeight
    }, { 
        duration: 800,
        complete: function() { $(this).toggleClass("expanded"); }
    });
});

これには多少のクリーンアップが必要になる可能性がありますが、うまく機能し、展開されたアイテムをこの方法で簡単に追跡できます。ここを参照してください: http://jsfiddle.net/mpQek/3/

Answer 2

アニメーションを連鎖させたい場合は、最初のアニメーションの完了時に実行する関数として次のアニメーションを配置します。

http://api.jquery.com/animate/

    $('.mainz11').click (function() { 
  $(this).animate({ height: '280px', 800, 
    function() { $('.mainz11').animate({ height: '100px'}, 800)
  ); 
 });

Answer 3

クリック関数は 1 つの関数しか取りませんが、2 つの関数を渡しています。この方法で試すことができます：

 $('.mainz11').click (function() {
    $(this).animate({
    height: '280px'
    }, 800);
   });