jQuery: FadeIn from left, not from top

[dooyou]

Hi Guys,

if I click some nav-buttons there should be fadeIn some content. This works great, but It should fadeIn from left and not from top, any ideas?

$(document).ready(function(){

$('.more').live('click',function(){

var href = $(this).attr('href');

if ($('#ajax').is(':visible')) {

$('#ajax').css('display','block').animate({height:'1px'}).empty();

}

$('#ajax').css('display','block').animate({height:'200px'},function(){

$('#ajax').html('');

$('#ajax').load('content.php #'+href,function(){

$('#ajax').hide().fadeIn().highlightFade({color:'rgb(253,253,175)'});

});

});

return true;

});

});

[seanroberts]

Can you give me the html and css you are using? That would be a big help.

From looking at this though, it seems that the element is by default in the top left of the parent element and its width is determined by what content is in the element (unless your css is depicting that -which is why I’d like to see it). So, when you animate its height to 200px, it increases the height from top -> down. Which is the effect your currently seeing correct?

So, what I would look at doing is to not set the height but set the width with the animate function. However, I would set, in your css, the height of the element (or at least its max-height) as well as the overflow:hidden; and white-space:nowrap; so you don’t have any strange looking content while the animation is going on.

With that, you are starting with an element whose height is set. When a trigger is clicked, the element has the animate function applied to it which should change its width to the correct size. And with the nature of elements being that they are positioned to the top left of their parent, it will appear to be transitioning from left to right.

I hope this helps.

[dooyou]

Hi seanroberts,

here is the link: http://dekude.die-kreation.de/

I couldn’t fix it (:

[Author]

Posts