Javascript jquery animate（）-如何仅移动/设置页面的一部分动画？_Javascript_Jquery_Html_Css

Javascript jquery animate（）-如何仅移动/设置页面的一部分动画？

javascript jquery html css

Javascript jquery animate（）-如何仅移动/设置页面的一部分动画？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图找到一种方法，使网页上的图像从顶部向下浮动，也可以从底部向下浮动。我从一个会从顶部飘落下来的开始（代码也可从以下网址获得）代码以下是我到目前为止拥有的原型/测试代码： <!DOCTYPE html> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type">

我试图找到一种方法，使网页上的图像从顶部向下浮动，也可以从底部向下浮动。我从一个会从顶部飘落下来的开始

（代码也可从以下网址获得）

代码

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

<!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>


文件标题
$（文档）.ready（函数（）{
var image=document.getElementById（“myimage”）；
image.style.display=“block”；
$（“#myimage”）.animate（{
marginTop：“400px”，
}，10000，“线性”）；
}); 
/*
$（文档）.ready（函数（）{
$（“#myimage_包装器”）.animate（{
顶部：“+=400”，
}，10000，“线性”）；
}); 
*/
这是一个浮动测试
这不应该移动，但它会移动

什么有效/什么无效

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

我想让图像看起来像是从页面外输入的。有点像苹果在这里所做的：

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

到目前为止我所做的

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

我还回顾了这个例子：但我没能从这里吸取教训

谢谢

这有助于您开始吗？我在一个div中替换的图像，是从侧面输入的，不会破坏文本的其余部分。堆栈溢出似乎需要超时，但不需要超时

$（文档）.ready（函数（）{
setTimeout（函数（）{
$（“#菱形”）。删除类（“屏幕外”）；
}, 100);
});
#diamond.offscreen{
转化：translateX（-100%）；
过渡：所有2；
}
#钻石{
背景颜色：钢蓝色；
高度：199px；
宽度：253px；
变换：translateX（0）；
过渡：所有2；
-webkit转换：所有2；
}

这是一个浮动测试
这不应该移动，但它确实移动了
为什么不将菱形包装设置为位置：绝对
。这样，元素将脱离正常的页面流
.diamond_wrapper {
    position: absolute;
}

这在某种程度上是一个充满负担的问题
首先，我会处理你想要的动画，完全不同。不幸的是，我不能确切地确定你所尝试的效果，但我相信这是有意义的
正在设置动画的元素位于文档流中，并将调整相邻元素，因为它会占用更多空间（margintop
在某种程度上使该元素x
更大）。您可以使用位置
从文档流中删除元素。有时最好使元素位置：绝对
，有时则不需要依赖于其他变量（是否存在显式的高度
或元素大小？）
此外，我个人不会设置边距顶部的动画
，而是使用像transform:translate3d（0，-150px，0）这样的属性我在我的示例中展示了它，我个人主要通过css来实现它，并使用jQuery触发一个helperclass

这是影响任何元素定位的图像，但这同样是一个原始示例，最好了解此处的真正目标，以便提供一个好方法。
为了防止移动对象影响页面的其余部分，必须将其从文档流中移除。这是通过css样式“position:absolute；”完成的
如果将此样式添加到css中，则代码工作正常
#diamond_wrapper {
    position:absolute;
    top: -300px;
    left: 100px;
}

请参阅此提琴：不需要任何JS。
这就是您所需要的：
@keyframes odd {
0% {transform: translate(0px,-400px); }
50% {transform: translate(0px,400px); }
100% {transform: translate(0px,-0px); }

}

检查一下，如果你想修改一下，请告诉我
我目前正试图像其他stackoverflow帖子一样将类添加到div中。。。然后试着只移动X类的div。@dot你能举个例子吗？嘿@Quoid给你：Quoid，你的例子正是我想要的！我将尝试将其调整到我的代码中，看看是否可以使其正常工作，就您的其他评论而言，我对css还不够了解。。。如果你有一些循环，举个例子会很有帮助。@dot如果你能详细说明的话，我可以更好地解释一下-你到底想要什么？两个文本元素和一个从顶部插入的元素？我的坏Sushanth，我不知道为什么我第一次尝试它时没有成功。我认为这是因为我需要将“.”替换为“#”，我非常同意一件事，如果可能的话，将jquery动画元素设置为绝对值，使用css（）或样式表中的任何适合您需要的内容。