如何在滑动内部内容(最初隐藏)的同时滑​​下外部div?

时间:2015-01-10 00:01:29

标签: jquery html css

我有一个包含三张图片的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/

修改

经过一番搜索,我找到了一个接近我想要发生的事情的例子。它使用animate而不是slide方法。我将发布我提供的代码的更新小提琴。

jquery animate down (100% element height)

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

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

1 个答案:

答案 0 :(得分:0)

我不确定我是否完全明白你的要求,但我会试一试。

我在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/

就像我说的那样,我并不完全明白你的要求,所以如果这不对,我会再给它一次。