发表新帖
发表新帖

using jQuery .animate to animate a div from right to left?

后端 未结
关注
5 816
太阳男子
太阳男子 2020-12-04 19:23

I have a div absolutely positioned at top: 0px and right: 0px, and I would like to use jquery\'s .animate() to animate it from it\'s c

相关标签:
5条回答
  • 一个人的身影
    2020-12-04 19:44

    If you know the width of the child element you are animating, you can use and animate a margin offset as well. For example, this will animate from left:0 to right:0

    CSS:

    .parent{
width:100%;
position:relative;
}

#itemToMove{
position:absolute;
width:150px;
right:100%;
margin-right:-150px;
}

    Javascript:

    $( "#itemToMove" ).animate({
"margin-right": "0",
"right": "0"
}, 1000 );
    0 讨论(0)
  • 失恋的感觉
    2020-12-04 19:46

    Here's a minimal answer that shows your example working:

    <html>
<head>
<title>hello.world.animate()</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
    type="text/javascript"></script>
<style type="text/css">
#coolDiv {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    background-color: #ccc;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
    // this way works fine for Firefox, but 
    // Chrome and Safari can't do it.
    $("#coolDiv").animate({'left':0}, "slow");
    // So basically if you *start* with a right position
    // then stick to animating to another right position
    // to do that, get the window width minus the width of your div:
$("#coolDiv").animate({'right':($('body').innerWidth()-$('#coolDiv').width())}, 'slow');
    // sorry that's so ugly!
});
</script>
</head>
<body>
    <div style="" id="coolDiv">HELLO</div>
</body>
</html>

    Original Answer:

    You have:

    $("#coolDiv").animate({"left":"0px", "slow");

    Corrected:

    $("#coolDiv").animate({"left":"0px"}, "slow");

    Documentation: http://api.jquery.com/animate/

    0 讨论(0)
  • 囚心锁ツ
    2020-12-04 19:57

    I think the reason it doesn't work has something to do with the fact that you have the right position set, but not the left.

    If you manually set the left to the current position, it seems to go:

    Live example: http://jsfiddle.net/XqqtN/

    var left = $('#coolDiv').offset().left;  // Get the calculated left position

$("#coolDiv").css({left:left})  // Set the left to its calculated position
             .animate({"left":"0px"}, "slow");

    EDIT:

    Appears as though Firefox behaves as expected because its calculated left position is available as the correct value in pixels, whereas Webkit based browsers, and apparently IE, return a value of auto for the left position.

    Because auto is not a starting position for an animation, the animation effectively runs from 0 to 0. Not very interesting to watch. :o)

    Setting the left position manually before the animate as above fixes the issue.

    If you don't like cluttering the landscape with variables, here's a nice version of the same thing that obviates the need for a variable:

    $("#coolDiv").css('left', function(){ return $(this).offset().left; })
             .animate({"left":"0px"}, "slow");    ​
    0 讨论(0)
  • 遇见更好的自我
    2020-12-04 20:00

    This worked for me 

    $("div").css({"left":"2000px"}).animate({"left":"0px"}, "slow");
    0 讨论(0)
  • 一向
    2020-12-04 20:00

    so the .animate method works only if you have given a position attribute to an element, if not it didn't move?

    for example i've seen that if i declare the div but i declare nothing in the css, it does not assume his default position and it does not move it into the page, even if i declare property margin: x w y z;

    0 讨论(0)
 看不清?
提交回复
热议问题