jquery animate(）-如何只移动/动画页面的一部分

jquery animate() - how to move / animate just one part of a page?

本文关键字：动画 一部分 移动 animate jquery      更新时间：2023-09-26

我正试图找到一种方法，让网页上的图像从上到下浮动。我已经从一个将从顶部飘下来的开始。

（代码也可在http://jsfiddle.net/trjthtpf/)

代码

以下是到目前为止我拥有的原型/测试代码：

<!DOCTYPE html>
<html>
        <head>
                <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
                <meta content="utf-8" http-equiv="encoding">
                <title>Title of the document</title>
                <script src="jquery.js"></script>
<script>
$(document).ready(function() {
       var image = document.getElementById("myimage");
       image.style.display = "block";
        $("#myimage").animate({ 
            marginTop: "400px", 
        }, 10000, "linear"); 
    }); 
/*
$(document).ready(function() {
        $("#myimage_wrapper").animate({ 
            top: "+=400", 
        }, 10000, "linear"); 
    }); 
*/
</script>
        </head>
        <body>
                <h1>This is a float test</h1>
                <div id="myimage_wrapper">
                        <img id="myimage" src="myimage.jpg" marginTop="0" height="199px" width="253" style="display: none"/>
                </div>
                <h1>this should not move but it does</h1>
        </body>
</html>

什么有效/什么无效

因此，上面的代码会将"myimage"图像从起始位置向下移动几英寸，这很好。但我有两个问题：

  1. 我希望这张图片看起来像是从页面外传来的。有点像这里的苹果：http://www.apple.com/iphone-6s/

  2. 另一个问题是，我希望图像在不移动页面上其他元素的情况下移动。

到目前为止我拥有的东西

我一直在玩DIV标签，看看是否有办法防止图像标签下的元素移动。但到目前为止，还没有成功。

我也一直在复习这个例子：jQuery动画一个潜水向下移动，而另一个向上动画但我还没能从中吸取教训。。。

谢谢。

为了防止移动对象影响页面的其余部分，必须将其从文档流中删除。这是用css样式"position:absolute；"完成的。

如果将此样式添加到css中，则代码运行良好；

#diamond_wrapper {
    position:absolute;
    top: -300px;
    left: 100px;
}

看看这把小提琴：http://jsfiddle.net/1wjkrk2d/

这在一定程度上是一个加载的问题。

首先，我会处理你正在追求的动画，完全不同。不幸的是，我不完全确定你正在尝试的效果，但我相信这是一个非常基本的例子

正在设置动画的元素在文档流中，当它消耗更多空间时，会调整相邻的元素（margin-top在某种程度上使元素x更大）。可以使用position属性从文档流中删除元素。有时最好制作一个元素position: absolute，有时则不需要依赖于其他变量（是否存在显式heights或元素大小？）。

此外，我不会亲自制作margin-top的动画，而是使用像transform: translate3d(0, -150px, 0);这样的属性，我在示例中展示了这一点，我个人主要通过css来完成，并使用jQuery触发一个助手class。

这是你的小提琴，没有影响任何元素定位的图像，但这也是一个原始的例子，最好知道这里的真正目标，以便提供一个好的方法。

这对您入门有帮助吗？我在div中替换的图像从侧面进入，而不会干扰文本的其余部分。堆栈溢出似乎需要超时，但不应该是必要的，否则

$(document).ready(function() {
  setTimeout(function() {
             $("#diamond").removeClass("offscreen");
    }, 100);
});
#diamond.offscreen {
  transform: translateX(-100%);
    transition: all 2s;
}
#diamond {
  background-color:steelblue;
  height: 199px;
  width: 253px;
  transform: translateX(0);
  transition: all 2s;
  -webkit-transition: all 2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>This is a float test</h1>
<div id="diamond_wrapper">
  <div id="diamond" height="199px" width="253" class="offscreen" />
</div>
<h1>this should not move but it does</h1>

为什么不将diamond_wrapper设置为position:absolute。这样，元素将脱离正常的页面流。

.diamond_wrapper {
    position: absolute;
}

不需要任何JS。这就是你所需要的：

@keyframes odd {
0% {transform: translate(0px,-400px); }
50% {transform: translate(0px,400px); }
100% {transform: translate(0px,-0px); }
}

看看吧，如果你想修改一下，请告诉我。

http://codepen.io/damianocel/pen/JYBEdB

相关文章：