javascript - 2个div的jQuery滑动动画，当它碰到图像时停止滑动

Question

我有一些关于 jQuery 动画的问题。

但首先，这是我目前拥有的。 http://jsfiddle.net/ssmm0714/00vkoopn/

<div id="container">
    <ul class="app-lst">

        <li class="item-6">
            <a href="#"></a>
        </li>
        <li class="item-7">
            <a href="#">
                <div class="icon closed"><img src="http://s27.postimg.org/5mixcx1j3/arrow.png" alt="arrow" class="arrow-img"></div>
            </a>
        </li>
        <li class="item-8">
            <a href="#">

            </a>
        </li>
    </ul>
</div>

我希望绿色 div 滑动时具有弹跳效果(如 easeOutBounce)，并将黄色 div 推出，直到只显示绿色 div 的箭头，然后显示绿色 div 的内容。 (好像是滑卡效果？)

目前，我做到了让箭头在点击时旋转。

有人可以帮我想出想要的效果吗？我尝试在两者上都做幻灯片，但我不知道如何在蓝色 div 击中箭头时停止它。

此外，作为附带问题，将每个 div 的所有宽度都以百分比形式表示是一种好习惯吗？我这样做是因为这将是一个移动网络应用程序，并希望使其具有响应能力。

总之，仅供引用，

这是我希望它在之后的样子的模型。 http://jsfiddle.net/ssmm0714/9q04nz0d/

<div id="container">
    <ul class="app-lst">

        <li class="item-6">
            <a href="#"></a>
        </li>
        <li class="item-7">
            <a href="#">
                <div class="icon closed"><img src="http://s27.postimg.org/5mixcx1j3/arrow.png" alt="arrow" class="arrow-img"></div>

                    <span> I AM THE HIDDEN TEXT! (loaded different HTML file) </span> 
            </a>
        </li>
        <li class="item-8">
            <a href="#">

            </a>
        </li>
    </ul>
</div>

Answer 1

要添加弹跳效果，您需要 jquery-ui 库。
接下来 - 您希望黄色 div 和绿色 div 具有相同的效果(对于隐藏和显示)并且效果应该同时起作用。

$('li.item-6').animate({'width' :'0'}, 2000, 'easeOutBounce');
$('li.item-7').animate({'width' :'100%'}, 2000, 'easeOutBounce');

看看这个 fiddle :http://jsfiddle.net/w84btwsf/1/
请注意，我添加了一些解决方法来处理小屏幕和百分比问题(您可以在 js 部分的顶部看到它)。

关于您关于百分比的问题 - 是的，这确实是一个很好的做法。您还可以使用众多有助于开发响应式布局的 css 框架之一(bootstrap 就是其中之一)。