如何向下滑動外部div，同時向下滑動內部內容（最初是隱藏的）？

Question

我有一個包含三個圖像的div。 我想將鼠標懸停在div上（它可以正常工作）。 但是，當外部div向下滑動時，圖像不會向下滑動。 相反，它們隨着外部div向下滑動而逐漸暴露（不移動）。

如何使外部div向下滑動，並使圖像最初從其隱藏位置向下滑動（向下移動），而不是逐漸顯示而不是完全不移動？

CSS

div.Game {width: 100%; height: 500px; border: solid 1px}
div.options { height: 30px; position:relative; display: none; background-color: #f3f3f3; z-index: 3; width: 100% }
div.options div {display: inline-block}
div.options img {z-index: 4; max-height: 30px}
div.shadow img {max-height: 5px; width: 100%}
div.shadow {display: block !important}
div.wrapper {display: block; position: relative; width: 100%; overflow: hidden}

HTML

  <div class="Game">
        <div class="wrapper">
                 <div class="options">
                     <div style="float:left; margin-left: 10px; margin-right: 10px"><a class="move"><img src="http://www.imagesup.net/di-3142084693010.png"/></a></div>
                <div style="float:right; margin-left: 10px; margin-right: 10px"><a class="resize"><img src="http://www.imagesup.net/di-15142084696415.png"/></a></div>
                <div style="float:right; margin-left: 10px; margin-right: 10px"><a class="remove"><img src="http://www.imagesup.net/di-214208466443.png"/></a></div>
                </div>
                <div class="shadow">
                <img src="http://www.imagesup.net/di-1114208466444.png" />
                </div>
            </div>
    </div>

JS

        $("div.Game").hover(function () {
           $("div.options").slideDown("fast");
        }, function () {
            $(this).find("div.options").slideUp("fast");
        });

http://jsfiddle.net/496c0qp7/9/

編輯

經過一番搜索，我找到了一個與我要實現的目標接近的示例。 它使用動畫代替幻燈片方法。 我將發布我提供的代碼的更新小提琴。

jQuery動畫向下（100％元素高度）

http://jsfiddle.net/7dary/1/

http://jsfiddle.net/MattLo/7dary/2/

Answer 1

我不確定我是否完全理解您的要求，但是我會試一試。

我向jQuery添加了幾件事：

$("div.Game").hover(function () {
    $("div.options, div.options *").slideDown("fast");
}, function () {
    $(this).find("div.options, div.options *").slideUp("fast");
});

此處的示例： http : //jsfiddle.net/bjogden/496c0qp7/10/

就像我說的那樣，我不太了解您的要求，因此，如果這不正確，我會再考慮一次。