Question

我第一次使用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);

Answer 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);

Answer 2

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

overflow: visible应如何设置动画？

Answer 3

jsfiddle的新手......但这很有效。您需要围绕要移动的内容制作框架以引导它或移动对象本身并使框架保持静止。

     _______________
    |               |     
    |               |     
---------------------------
|   |               |     |
|   |               |     |
|   |sliding image  |     |
|   |---------------|     |
|                         |
|                         |
|                         |
| viewport                |
---------------------------

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

Answer 4

是您的例子

$("#panel").animate({

    height: 320,

}, 2000);

和css为你的例子

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

jQuery向下滑动面板

4 个答案: