The only way I can think of is to "hide" the element by moving it off
the page. So instead of using "display:none", use "position: absolute;
left: -999999px"
So something like this semi-pseudocode:
<style>
.compatible-hider { position: absolute; left: -999999px }
.content-bloc { background: url('ajax.png'); }
</style>
<div class="content-bloc compatible-hider"></div>
<a href="#" class="ajax">Click to Load</a>
<script>
function showPretty(){
var el = $(this), height = el.height(), width = el.width();
el.css({width: 50, height: 50}).removeClass('content-bloc
compatible-hider').animate({height: height, width: width}, 1500);
}
$(function(){
var content = $('.content-bloc').bind('ajax-done', showPretty);
$('.ajax').click(function(){
$.get('url.php', function(data){
content.html(data).trigger('ajax-done');
});
});
});
</script>
On Mar 21, 10:36 pm, bob <xoxeo...@gmail.com> wrote:
> content for "hidden_el" is loaded by Ajax from random source
> so the height of that element is not known up front.
>
> I would like to use "animation" function to show element(expand) on
> mouseover.
>
> How do I find out the height of that element(final height for
> animation purposes)
> when content is already loaded but it is hidden?
>
> <span id="show_el">Show element</div>
> <div id="hidden_el" style="display:none"></div>
>
> jq('#show_el').mouseover(function(){
>
> jq('#hidden_el').css({height: 0}).animate(
>
> {height: ??????????},
>
> { duration: 200, queue: false, easing:
> 'easeOutBounce',complete:function(){ //some callback here} }
>
> );
>
> }
