Animating text alignment with jquery
By clicking the button $('#btn').click()
, I want the group of elements to span
be set with text-aligned CSS text (text-aligned to the left) and animate so that the text slides from left to right.
I tried with .animate({ 'text-align': "left")
but it doesn't work. I tried again with .addClass('alignRight', 1000)
and the text changed, but the sliding effect did not change. When I tried with .addClass('floatRight', 1000)
, it has a similar effect with alighRight
.
.alignRight{ text-align : right;}
.floatRight(float: right;}
So how do I get the sliding effect from left to right? The markup is like
<div id="main" style="width: 300px;">
<div class="item" style="width: 100%;">
<span class="info">Strings</span>
</div>
<div class="item" style="width: 100%;">
<span class="info">Strings</span>
</div>
</div>
source to share
HTML markup (unchanged)
<div id="main" style="width: 300px;">
<div class="item">
<span class="info">Strings</span>
</div>
<div class="item">
<span class="info">Strings</span>
</div>
</div>
CSS markup
.info {
display: block; /* width works better on block level elements */
text-align: right;
width: 20%; /* use something sensible as the default value */
overflow: hidden; /* if you choose 0% for the above property then use this */
}
JQuery code
$(document).ready(function() {
$(".info").animate({
width: "100%"
}, 1000);
});
Demo here
PS: I'd rather use CSS position relative + absolute along with CSS + left properties overflow.
source to share