jquery - 使用 jQuery 以动画方式隐藏侧边栏中的元素

Question

我的页面上有一个侧边栏。当用户调整浏览器大小时，只有未剪切的元素才会显示(在窗口底部)。它的工作原理正如您在 jsFiddle 上看到的那样。

http://jsfiddle.net/MJ9VC/23/

测试:调整浏览器大小(使窗口高度变小)。您会看到一些隐藏的元素。调整浏览器大小(使窗口高度更大)。您会看到一些元素正在显示。

问题:我成功地从未显示到显示(平滑地显示元素)制作了动画，但我未能从<强>显示到未显示。

不知道我说清楚了吗？

Answer 1

这是您的解决方案:

if (y <= itemBottom) {
    if(!that.hasClass('hidden') && !that.is(':animated')){
        that.removeClass('visible').addClass('hidden','slow'); 
    }
}
else{
    if(that.hasClass('hidden') && !that.is(':animated')){
        that.addClass('visible','slow').removeClass('hidden');
    }
}

添加/删除隐藏/可见的顺序很重要。您也不想在淡入/淡出时对其进行干扰，并且您还需要 JQuery UI 来允许您对添加类进行动画处理:

演示:http://jsfiddle.net/AlienWebguy/jrvsB/