jQuery выдвижная панель

Question

это мой первый раз, используя .animate () из jQuery. Моя основная идея - панель с картинкой появится через 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

js для вашего примера

$("#panel").animate({

    height: 320,

}, 2000);

и css для вашего примера

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

Answer 3

новичок в jsfiddle .. но это работает.Вам нужно либо создать рамку вокруг того, что вы перемещаете, чтобы сослаться на нее, либо переместить сам объект и держать рамку неподвижным. Один экран .http://jsfiddle.net/8WN5c/9/embedded/result/

Answer 4

Попробуйте это: http://jsfiddle.net/8WN5c/5/

Как overflow: visible должен быть анимирован?