How to slide div from left to it's absolute position in the middle of the page?
Question
I want to use jQuery or Javascript to take my logo and when the page loads, slide it from the left hand side of the page and make it stop and stay at it's resting spot about mid way through the page. (Logo div id="mylogo" )
3 answers
solution1
0 2012-11-15 15:49:38
$(document).ready( function () {
$("#myLogo").animate("aCSSAttribute", "toThisValue");
});
also check: http://api.jquery.com/animate/
If you show your effort, then I can help you out better.
solution2
0 2012-11-15 15:56:21
You'll need to work out just how far it needs to move, the example below makes an assumption of x% but you can do this to the pixel should you need to.
Don't forget to position your logo, and to make sure the outer element has some width/display definition.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main {width:100%;}
#mylogo{border:1px solid red;width:200px;height:100px;display:block;position:relative}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#mylogo').animate({left:'+=25%'});
});
</script>
</head>
<body>
<div id="main">
<div id="mylogo"></div>
</div>
</body>
</html>
solution3
0 2012-11-15 16:00:15
You'll probably want something like this: http://jsfiddle.net/SATMY/1/
Your question is not clear at all, so it is hard to say whether it is possible that my answer is, indeed, a correct answer.
$("div#logo").animate({"marginLeft":"-50px"}, 800);
And initial CSS:
margin-left: -900px; /* Before slide-in */
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.