如何向下滑动外部div，同时向下滑动内部内容（最初是隐藏的）？

Question

I have a div containing three images. I want to slide down the div on hover (which is working correctly). However, while the outer div slides down, the images are not sliding down. Instead, they are being exposed incrementally (not moving) as the outer div slides down.

How can I get the outer div to slide down and make the images slide down (moving downward) initially from their hidden position as opposed to being incrementally displayed and not moving at all?

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/

EDIT

After some searching I found an example close to what I am trying to make happen. It uses animate instead of slide method. I will post an updated fiddle of my provided code.

jquery animate down (100% element height)

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

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

Answer 1

I am not sure if I fully understand what you are asking for, but I will give it a shot.

I added a couple things to the jQuery:

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

Example here: http://jsfiddle.net/bjogden/496c0qp7/10/

Like I said, I don't fully understand what you are asking for, so if this isn't right, I'll give it another go.