我正在努力实现以下目标 EFFECT页面加载时。图像从 0% 不透明度开始并脱离页面，然后滑入适当位置，同时达到 100% 不透明度。我已经设法使不透明度起作用，但幻灯片不起作用
我的代码如下:
HTML
<head>
title>Nic Brown</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function() {
window.onload = function() {
$('#logo').hide().fadeIn(2000);
};
</script>
<script type="text/javascript" src="js/plugins/slideup.js"></script>
</head>
<body>
<div class="navbar navbar-mine navbar-static-top">
<div class="container">
<div class="name">
<a href="#" class="navbar-brand" style="font-family:'norm'; font-size:1.7em; margin-top:3px">NICHOLAS
<em>BROWN</em>
</a>
</div>
<button class="btn btn-default btn-lg navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="about.html" style="font-family:'Roboto'; font-weight:300;">About</a>
</li>
<li>
<a href="#about" style="font-family:'Roboto'; font-weight:300;">Portfolio</a>
</li>
<li>
<a href="#about" style="font-family:'Roboto'; font-weight:300;">Social</a>
</li>
<li>
<a href="#about" style="font-family:'Roboto'; font-weight:300;">Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div class="frontbg">
<img onload="this.style.opacity='1';" src="img/bg/2.png" id="logo" />
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
CSS
.frontbg {
width: 80%;
height: auto;
left: 10%;
top: 15%;
position: fixed;
}
.frontbg img {
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
opacity:0;
-moz-transition:opacity 2s;
-webkit-transition:opacity 2s;
-o-transition:opacity 2s;
transition:opacity 2s;
}
其他 CSS 只是 Bootstrap 的东西。
这是尝试的 jQuery Slide Up
$(document).ready(function() {
$('.frontbg').delay(3000).animate({bottom:"15%"},600);
});
非常感谢您的帮助。网站可在线查看HERE
最佳答案
关于javascript - 页面加载时向上滑动图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20342059/