I am trying to use jQuery slide-in animation and it seems to work fine, but my the second animation doesn't work. Can anyone tell me what I am doing wrong?
This line:
$('#headline1Txt').animate({'marginLeft': "100px"}, 1000);
is working fine, but this one:
$("#headline1Txt").animate({left: "+=30"}, 500);
is not working.
HTML
<div id="mainContainer">
<div id="headlineText">
<p id="headline1Txt" >Striped Bag</p>
</div>
</div>
JS
$(document).ready(function () {
$('#headline1Txt').animate({'marginLeft': "100px"}, 1000);
$("#headline1Txt").animate({left: "+=30"}, 500);
});
CSS
#headlineText {
margin: 60px 80px;
}