0

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.

My Code

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;
}

3 Answers 3

1

The left CSS property specifies part of the position of positioned elements. For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the left margin edge of the element and the left edge of its containing block.

https://developer.mozilla.org/en-US/docs/Web/CSS/left

As the CSS left property is part of position:*; property's, fix by adding the position property, so jquery knows what to increment a left value to.

In Action

CSS

#headlineText
{
    margin:60px 80px;
}
#headline1Txt
{
    position:relative;
}

HTML

<div id="mainContainer">

    <div id="headlineText">
        <p id="headline1Txt">Striped Bag</p>
    </div>

</div>

jQuery

$(document).ready(function () {

   $('#headline1Txt').
       animate({ 'marginLeft': "100px" }, 1000).
       animate({ left:"+=30" }, 5000);

});
1
0

What are you trying to achieve?

You want the text to slide in (heading right across the screen) then slide another 30px?

Thats what $("#headline1Txt").animate({ 'marginLeft': "+=30" }, 500); will achieve. 'marginLeft' not just left.

0

The left property of css only works with elements with absolute position. To make your animation work you have to put you element at absolute position.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.