Question

使用Jquery创建平滑过渡/动画时遇到问题。现在已经忙了一段时间，试着用谷歌搜索它。

我有一个包含4个图块的页面，如果选择了图块（就像示例中已经存在的那样），所有图块“关闭”并且所选图块旁边的div变为可见，div content_container 。瓷砖由class="tile"制成，如果已关闭class="tile closed"。当我将鼠标悬停在图块上时，它会扩展为原始图像。

当点击图块时，content_container应该再次关闭，图块应该展开回原始图像，然后重定向到选定的网址。磁贴工作正常，但是我遇到了content_container的问题。我尝试通过在css中设置transition规则以及点击更改div的width=0和height=0来关闭它。然而它似乎忽略它/保持相同的宽度。然后我尝试设置display:none。哪个有效，但它没有动画，content_container只是disappears，这不是理想的效果。

使用谷歌我找到了一个答案，该答案首先设置opacity:0动画，然后再设置display:none。这不是我的问题的解决方案，因为它仍将占用所有空间，而瓷砖也会扩展，使得两个正确的瓷砖脱离屏幕。

有人知道如何动画显示无？和/或为什么它忽略了width=0，因为如果它起作用，它还应该动画它吗？

JSFiddle：http://jsfiddle.net/RE5hF/10/

提前致谢！

编辑：

我认为简单的解决方案就是改变宽度，所以我尝试使用它：

$("#container").on('click', 'a', function(){
        $('.not_hidden').css({"width":"0px !important"});
        $('.content_container').css({"width":"0px !important"});


});

但是在点击代码时，代码才会被完全忽略，如果我在其中添加其他代码，例如$('.tile').removeClass('closed');，则tile的类确实会更改，因此“click function”正在运行。只是改变容器的宽度是行不通的。似乎无法找出原因..

编辑：固定

代码与.hover()代码冲突，宽度正在更改容器，但由于hover()代码而立即设置回不同的宽度。结束为content_container添加另一个类，将其放入hover code并使用.remove()删除a点击的课程。这样.content_container.css('width':'0px')就不再与.hover()代码冲突了。

工作：http://jsfiddle.net/RE5hF/14/

Answer 1

我无法理解你的问题，但我认为你想隐藏一个元素的动画。

为此，您可以使用

.fadeOut()

或

.hide('fadein');

或

.slideOut();

Jquery动画显示：无

1 个答案: