Text effect in jquery

Question

I created the notification bar with the text effect everything seems ok but when i add the text effect like moving from left to right in that it seems work when in first time and after that it looks like this way see the FIDDLE

 jQuery('.text').animate({
                'right': '300px'
            }, 'slow', 'linear').animate({
                'left': '300px'
            }, 'slow', 'linear').animate({
                'left': '0',
                'right': '0',
            });

For the second time when i click expand it appears from center to right when i refreshing the page itself it appear properly for the first time.

Is there is a way to show the message as from left to right to center whenever i open the bar.

Thanks in Advance.

Answer 1

jQuery('.text').animate({
                'right': '300px',
            }, 'slow', 'linear').animate({
                'left': '300px'
            }, 'slow', 'linear').animate({
                'left': '0',
                'right': '0',
            });
    jQuery('.text').css('right', 'auto')
    jQuery('.text').css('left', 'auto')
});

working demo : http://jsfiddle.net/UCTgR/12/ (Note: this demo has partial functionality yo just show what u missed, to check click on the banner)