Onclick无法正常运作

Question

Why will this code not work as an onclick ?

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

Answer 1

If you're trying to first expand the element and then contract it, it should probably be something like this:

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

This could use some cleaning up, but it does the trick, and you can track expanded items easily this way. See here: http://jsfiddle.net/mpQek/3/

Answer 2

The click function takes only a single function but you are passing 2 functions to it. You can try it this way:

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

Answer 3

If you want to chain animations, put the next animation as the function to run on complete of the first animation:

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

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