如何为我的标题设置动画，使其在加载时从左向页面视图水平滑动？
[英]How to animate my header to slide in horizontally from left to page view on load?
问题描述
我正在尝试使用JavaScript将<header></header>设置为不在页面上（加载时）的动画，然后像移动的横幅一样滑入页面位置。 是否有可能做到这一点，如果可以的话，我怎样才能达到这种效果。 我只希望它执行一次，也就是页面加载/刷新时。 任何帮助，将不胜感激！
HTML片段：
<!DOCTYPE html>
<html>
<head>
<link rel= "stylesheet" href= "BoxModel3.css">
<title>Indie-GO! Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>$(document).ready(function () {
$("#fade").fadeIn(5000);
});</script>
</head>
<body>
<div id="wrapper">
<header>Home
<div id="fade">
<h1 style="text-indent: 7em; font-family: Ravie; color: khaki;">Indie-GO!</h1>
</div>
<div class="img">
<img src="118_832586-W.jpg"/>
</div>
</header>
CSS片段：
header, nav, section, footer, #fade
{
display: block;
}
*
{
margin: 0px;
padding: 0px;
border: 0px;
}
html
{
background-color: slategrey;
}
header
{
border: 25px solid indigo;
font-family: Arial Black;
font-size: 25px;
padding 30px;
background-color: indigo;
text-shadow: 5px 4px 3px darkgrey;
color: beige;
}
4 个解决方案
解决方案1
2
您需要这个权利吗？
$(document).ready(function () { // $("#fade").hide(); // you must hide first // $("#fade").fadeIn(3000); // and slow fade to show // or // but i like this :) $("#fade").hide(); $('#fade').show('slide', {direction: 'left'}, 1000); });
header, nav, section, footer, #fade { display: block; } * { margin: 0px; padding: 0px; border: 0px; } html { background-color: slategrey; } header { border: 25px solid indigo; font-family: Arial Black; font-size: 25px; padding 30px; background-color: indigo; text-shadow: 5px 4px 3px darkgrey; color: beige; }
<!DOCTYPE html> <html> <head> <link rel= "stylesheet" href= "BoxModel3.css"> <title>Indie-GO! Home</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> </head> <body> <div id="wrapper"> <header>Home <div id="fade"> <h1 style="text-indent: 7em; font-family: Ravie; color: khaki;">Indie-GO!</h1> </div> <div class="img"> <img src="118_832586-W.jpg"/> </div> </header>
解决方案2
2 2015-12-09 07:28:33
尝试这个 ：）
$(document).ready(function() { //$("#fade").fadeIn(5000); var b = $("#fade").position(); $("#fade").css("left", "-80%"); $("#fade").animate({ left: "+" + b.left }, 5000); });
header, nav, section, footer, #fade { display: block; } * { margin: 0px; padding: 0px; border: 0px; } html { background-color: slategrey; } header { border: 25px solid indigo; font-family: Arial Black; font-size: 25px; padding 30px; background-color: indigo; text-shadow: 5px 4px 3px darkgrey; color: beige; } #fade { position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <body> <div id="wrapper"> <header>Home <div id="fade"> <h1 style="text-indent: 7em; font-family: Ravie; color: khaki;">Indie-GO!</h1> </div> <div class="img"> <img src="http://www.bobsballoons.com/Photos/BalloonsInField.jpg" /> </div> </header> </div> </body>
解决方案3
2 已采纳 2015-12-09 07:40:03
解决方案4
1 2015-12-09 07:31:29
编辑您的CSS：
header
{
position: relative; //make the position of the header relative
left: -100%; // set left to -100%
border: 25px solid indigo;
font-family: Arial Black;
font-size: 25px;
padding 30px;
background-color: indigo;
text-shadow: 5px 4px 3px darkgrey;
color: beige;
}
添加的JS：
$(document).ready(function() {
$("header").animate({"left": 0}, 3000) //3000 is the number of milliseconds for the slide in, which you can change.
})
如何将div从左侧滑动到页面中间的绝对位置？
[英]How to slide div from left to it's absolute position in the middle of the page?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.