jQuery 向下滑动面板答案

【问题标题】：jQuery slide down paneljQuery 向下滑动面板
【发布时间】：2011-06-06 13:03:52
【问题描述】：

这是我第一次使用 jQuery 中的 .animate()。我的主要想法是带有图片的面板将在 2 秒内出现，并向下滑动。但目前它不工作，你能让它工作吗？

您可以在此处查看演示：http://jsfiddle.net/thisizmonster/8WN5c/3/

如果看不到，这里是复制版。

HTML：

<div id="panel">
    <img src="http://fusedfilm.com/wp-content/uploads/2009/08/spider-man.jpg" alt="dummy image" />
</div>

CSS：

#panel {
    width: 200px;
    position: absolute;
    top: 0px;
    left: 0px; 
    height: 0px; 
}

JavaScript：

$("#panel").animate({
    height: 320,
    overflow: visible
}, 2000);

【问题讨论】：

标签： jquery animation slide

【解决方案1】：

也许你的意思更像这样：

http://jsfiddle.net/8WN5c/6/

这实际上会通过移动图像的相对位置将图像向下滑动到位。

在这种情况下，“面板”就像一个相框。图片在框外看不到，图片滑入框内。

HTML：

<div id="panel">
        <div id="slideDownPanel">
    <img src="http://fusedfilm.com/wp-content/uploads/2009/08/spider-man.jpg" alt="dummy image" />
        </div>
</div>

CSS：

body {background-color: #000}
#panel {
    width: 430px;
    height: 320px;
    position: absolute;
    top: 0px;
    left: 0px; 
}
#slideDownPanel
{
    width: 430px;
    height: 320px;
    position: relative;
    top: -320px;
}

JS：

$("#slideDownPanel").animate({
    top: 0
}, 2000);

【讨论】：

非常感谢，它现在完美运行。感谢您转移最高价值的技巧。

【解决方案2】：

试试这个：http://jsfiddle.net/8WN5c/5/

overflow: visible 应该如何动画化？

【讨论】：

我添加它是因为
具有并且无论 div 的高度值如何，图像都显示完整。顺便说一句，它按我的预期工作，谢谢。

【解决方案3】：

jsfiddle 的新手.. 但这有效。您需要围绕要移动的对象制作一个框架以引用它，或者移动对象本身并保持框架静止。

_______________ | | | | -------------------------- | | | | | | | | | |滑动图片 | | | |---------------| | | | | | | | |视口 | --------------------------

普通视图 http://jsfiddle.net/8WN5c/9/
单屏视图。 http://jsfiddle.net/8WN5c/9/embedded/result/

【讨论】：

【解决方案4】：

你的例子的js

$("#panel").animate({

    height: 320,

}, 2000);

和你的例子的css

body {background-color: #000}
#panel {
width: 200px;
position: absolute;
top: 0px;
left: 0px;
height: 0px;
overflow:hidden;
}

【讨论】：