animating an element's height using jquery

前端 未结 7 496
情书的邮戳
情书的邮戳 2021-01-26 04:56

I have some bars that are filled with a height %, but right when the page loads I would like all the bars to fill up and then decrease to 0. I know how to fill it up with a for

相关标签:
7条回答
  • 2021-01-26 05:33

    dude slideToggle. Check it - http://jsfiddle.net/6hp2G/. works like a boss

    0 讨论(0)
  • 2021-01-26 05:33

    I think jQuery animate is what you are looking for. Result is something like this.

    0 讨论(0)
  • 2021-01-26 05:41

    You're looking for:

    for(i = 100; i >= 0; i--)
    

    But you could just do this slideUp:

    $('someElement')
        .hide()
        .slideDown(500, function () {
            $(this).slideUp(500);
        });
    

    The above would animate the element like you want. That code equates to roughly the following, in case you even want to do more complicated animate animations:

    $('someElement')
       .hide()
       .animate({ height: '100%' }, 500, function () {
            $(this).animate({ height: 0 }, 500);
        });
    

    Update: Here is a jsFiddle demonstration.

    0 讨论(0)
  • 2021-01-26 05:47

    the second one should be:

    for(i = 100; i >= 0; i--)
    
    0 讨论(0)
  • 2021-01-26 05:48

    How about this:

    for(i = 100; i >= 0; i--)
    
    0 讨论(0)
  • 2021-01-26 05:50

    If you are trying to animate the height of an object then I think you want the .animate() function of jQuery:

    $('.bar-elements').animate({ height : '100%' }, 1500, function () {
        $(this).animate({ height : 0 }, 1500);
    });
    

    or alternatively you can use the slideUp/slideDown functions that do this already:

    $('.bar-elements').hide().slideDown(1500, function () {
        $(this).slideUp(1500);
    });
    

    Docs for .animate(): http://api.jquery.com/animate

    Docs for .slideUp(): http://api.jquery.com/slideup

    0 讨论(0)
提交回复
热议问题