3

I know the jQuery animate function, and I can change the divs height with that smoothly, but the question is:

I have a div:

<div class="blah">Content with 3 lines</div>

And then I append some more lines to the above div using jQuery, the div height is auto so it's gonna go longer, but not smoothly, is there anyway it could go longer smoothly like using jQuery animate function?

I just don't want to type animate({blah}) on any appends, ajax calls, etc..

Is it possible to have a function to get called on every divs height changes? and deal with it using animate function?

I have also read about transitions, so I did:

.blah{
    -webkit-transition: height 1s ease-in-out !important;
    -moz-transition: height 1s ease-in-out !important;
    -ms-transition: height 1s ease-in-out !important;
    -o-transition: height 1s ease-in-out !important;
    transition: height 1s ease-in-out !important;
}

but not working

The jQuery method, which appends data:

$('blah').append('<p style="clear:both;">Another Line</p>')

Thanks in advance

toesslab
  • 5,092
  • 8
  • 43
  • 62
behz4d
  • 1,819
  • 5
  • 35
  • 59
  • can you change the order and then try: animate height, then append? – sinhayash Apr 20 '14 at 18:11
  • Isnt a transition time suppose to ne in th master class and effects in transition classes?? I'm not too familiar with CSS3 animation, but I've seen almost all that way – WASasquatch Apr 20 '14 at 18:12
  • You could append the data in 's or something like that and animate those at creation, but without calling an animate method any how?... Interesting question, really, I stay tuned ;-) I don't see a solution in CSS3 – toesslab Apr 20 '14 at 18:14
  • @pc-shooter I'm working on something, what if we have a function which get called on every div `height changes`, and do it with `animate` ? – behz4d Apr 20 '14 at 18:15
  • That should work, but you said, that you don't want to call the animate on every append, ajax, etc – toesslab Apr 20 '14 at 18:16
  • @pc-shooter I meant not every time I type `animate({blah, blah})`, this needs to deal with `animate` function anyway, or some css `transitions` trick!? – behz4d Apr 20 '14 at 18:18
  • Can you show the jquery code where you append data ? – toesslab Apr 20 '14 at 18:20
  • @pc-shooter `$('blah').append('

    Another Line

    ')`     – behz4d Apr 20 '14 at 18:20
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/51059/discussion-between-pc-shooter-and-behz4d) – toesslab Apr 20 '14 at 18:22

3 Answers3

1

Demo

jQuery

$("#blah")
    .hide()
    .html('<p>Another Line</p><p>Another Line</p><p>Another Line</p>')
    .slideDown('slow');

CSS

div {
    background:slategray;
    color:white;
    padding:20px;
}
4dgaurav
  • 11,360
  • 4
  • 32
  • 59
0

You can try this, but it is better to create a global function with animating a height or try pc-shooter method.

 $(blah).change(function() { // Do something });

And maybe this can help you: http://jsfiddle.net/edelman/Pb6FF/

VeeeneX
  • 1,556
  • 18
  • 26
0

The height:auto will not work with CSS transition

A height must be defined (px or percentage, rather than auto) to make the transition work.

You might want to add this on your JavaScript

// Get the height of 'blah' from document
heightOfBlah = $('.blah').height();

// Set the height of 'blah' explicitly
$('.blah').css('height', heightOfBlah);

After setting this explicitly, the CSS transition will work.

aniskhan001
  • 7,981
  • 8
  • 36
  • 57