jquery， float 元素消失后平滑过渡滑动

Question

我对 jquery 还是有些陌生，您可能会注意到这一点。

Check out my jsfiddle

这是 jquery 代码，但我认为您需要看一下示例才能清楚:

$(document).ready(function(){

                $('body').click(function(event) {
                    if($(event.target).is('.pageOne')) {
                        $('.pageTwo, .pageThree, .pageFour').fadeOut();
                                                    }

                    else if ($(event.target).is('.pageTwo')) {
                        $('.pageOne, .pageThree, .pageFour').fadeOut();
                        }

                    else if ($(event.target).is('.pageThree')) {
                        $('.pageFour, .pageTwo, .pageOne').fadeOut(); }

                    else if ($(event.target).is('.pageFour')) {
                        $('.pageThree, .pageTwo, .pageOne').fadeOut(); }
                });



            }); // end ready

这只是一个原型(prototype)，我稍后可能会将其转化为有用的东西。 基本上我想做的是，当你点击其中一篇彩色文章时，其余的就会消失(这有效)，但是你会注意到被点击的元素有点跳到左边，因为它是向左浮动。

我想要的是让被点击的文章以某种方式平滑地向左滑动。

关于如何实现这一点有什么想法吗？

提前致谢!

Answer 1

也许您可以将 fadeOut() 替换为 animate() 方法，如下所示:

$('.pageTwo, .pageThree, .pageFour').animate({'width':'0','opacity':'0'});

查看演示 http://jsfiddle.net/QLcCT/6/