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 lib 接下来的事情 - 你希望黄色div和绿色div具有相同的效果（对于隐藏和显示），效果应该同时工作。

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

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

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

jQuery幻灯片2个div的动画，当它到达图像时停止滑动

1 个答案: