<div id='wrapT'>some stuff here</div>
<div id='btnsT'>
<img id='prev' src='btns/prev_01.png' alt='prev'>
<img id='next' src='btns/next_01.png' alt='next'>
</div>
js
$('#btnsT #next').click(function(){
var a = $('#divsT > div').eq(xdiv).html();
$('#wrapT').html(a);
});
#wrapT changes its content correctly, but it firstly changes its height to 0 for a few seconds, then come back to original height.
How to keep the height fixed during this process?
IMPORTANT: both the old and the new content is 450px in height.
I tried in css:
#wrapT{
height:450px;
}
But in this case there is a problem during re-sizing the window - it stays always 450px.
also tried to add in btn click event:
var x = $('#wrapT').height();
$('#wrapT').css('height', x + 'px');
$('#wrapT').html(a);
$("#wrapT").css('height', 'auto');
witout success. #wrapT keeps to change its height.
I have done something similar before. What you can do is load the next item behind the current one with visibility:hidden; and possibly a lesser z-index. This means the shape of wrapT will stay.
You can then do something like:
$('#OldItem').fadeOut(400, function() {
$(this).remove();
});
$('#NewItem').fadeIn(400)
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments