Question

我的页面上有一个侧边栏。当用户调整浏览器大小时，只有在未剪切项目时才显示项目（在窗口底部）。它可以在jsFiddle上看到。

测试：调整浏览器大小（使窗口高度变小）。你会看到隐藏的一些物品。调整浏览器大小（使窗口高度更大）。你会看到一些显示的项目。

问题：我成功完成动画从未显示到显示（顺利显示项目）但我从< strong>显示 未显示。

我不知道我是否清楚？

Answer 1

我认为问题来自于将可见性设置为隐藏

that.css('visibility','hidden');

一旦你这样做，它就会消失，无论你设置的不透明度如何。

您可以跳过整个可见性属性并使用不透明度吗？因此，当浏览器变小时，您可以：

that.animate({ 'opacity': 0 });

Answer 2

这是你的解决方案：

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/

使用jQuery动画隐藏我的侧边栏中的项目

2 个答案: