在页面加载时向上滑动图像答案

【问题标题】：Slide Image Up on Page Load在页面加载时向上滑动图像
【发布时间】：2013-12-03 03:01:15
【问题描述】：

我正在尝试在页面加载时实现以下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 jquery html

【解决方案1】：

您实际上可以在不使用 javascript 的情况下创建这种效果。使用css3的

@keyframes

这是我的小提琴http://jsfiddle.net/KaDy8/20/

【讨论】：

非常感谢。像魅力一样工作！

【解决方案2】：

我想这会起作用：

$(document).ready(function(){
    $("#myId").css({top:1000,position:'absolute'});
    $("#myId").animate({top:100}, 800);
 });

【讨论】：

【解决方案3】：

使用 css 来实现。不需要 Jquery

@-moz-keyframes slidein {
  from {margin-bottom:0%;}
  to {margin-top:35%;}
}

@-webkit-keyframes slidein {
  from {margin-bottom:0%;}
  to {margin-top:15%;}
}

例如

【讨论】：

【解决方案4】：

这里有一个非常相似的答案 JQuery Animate() slide div up from bottom of page

$('#content').animate({'margin-top': '50px'}, 1000);

【讨论】：