javascript - Onclick 不工作

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

click函数只需要一个函数，但您要向它传递 2 个函数。你可以这样尝试：

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

Answer 3

如果要链接动画，请将下一个动画作为要在第一个动画完成时运行的函数：

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

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