我有一个包含三张图片的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方法。我将发布我提供的代码的更新小提琴。
答案 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/
就像我说的那样,我并不完全明白你的要求,所以如果这不对,我会再给它一次。