赞助商

jquery – 当div移动以填充淡出的其他div留下的空白空间时,如何为div设置动画

发布时间:2019-04-24 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了jquery – 当div移动以填充淡出的其他div留下的空白空间时,如何为div设置动画脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一组div,每个div对应一组类别.当我点击一个过滤器时,这将改变div的类,并根据这些类别使它们变得易碎或隐藏.我控制div如何淡入/淡出并且它们缓慢而漂亮但每次div消失时,保持不变的那些突然移动以填充被隐藏的空间留下的空白空间.

如何在其他人消失并留下空白空间之后平滑未隐藏的div的移动?

//Before this goes a long function that decides wich divs will get their class changed
 $('#work-container > div[class*=visible]').fadeIn('slow','swing');
 $('#work-container > div[class*=hidden]').fadeOut('slow','swing');

编辑:http://jsfiddle.net/Ccswn/3/小提琴的东西

解决方法

我建议使用animate()代替fadeOut():
$('div').click(
    function() {
        $(this).animate({
            'height': 0,'opacity': 0
        },750,function() {
            $(this).remove();
        });
    });​

JS Fiddle demo.

编辑以合并jQuery / CSS解决方案:

更改.item的CSS以包含以下内容:

.item{
    /* other css removed for brevity */
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    transition: all 1s linear;
}

并将a.hidden更改为以下内容:

.hidden {
    width: 0; /* reset everything that might affect the size/visibility */
    height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    transition: all 1s linear;
}

使用以下jQuery:

// content animate
$('#work-container > div[class*=hidden]').addClass('hidden');
return false;

JS Fiddle demo.

然后一切似乎都按照你的意愿运作.虽然我没有尝试按照上面的块中的.addClass(‘visible’)进行操作,但我还是不管它.

这确实需要一个支持CSS过渡的浏览器(并且支持不透明度),所以它在你的用例中可能并不完美.

总结

以上是脚本之家为你收集整理的jquery – 当div移动以填充淡出的其他div留下的空白空间时,如何为div设置动画全部内容,希望文章能够帮你解决jquery – 当div移动以填充淡出的其他div留下的空白空间时,如何为div设置动画所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: