6

问题：我可以使用 CSS 过渡来控制 div 如何移动到由另一个被隐藏的 div 创建的空闲空间中。

我的应用程序中有元素根据用户设置的时间间隔出现和消失（显示：无）。正如 display:none 所预期的那样，有时相邻的元素会移动以占据 .

我不介意在这种情况下移动。我想控制它的移动方式。我想要的是通过 css 转换或其他方法移动，而不仅仅是混入到位。这可能吗？

这是一个 JS fiddle，通过按钮单击来说明场景。当#red 被隐藏时，我希望看到#blue 逐渐进入位置。谢谢。

http://jsfiddle.net/uV6W7/1/

这是jsfiddle中的代码：

HTML

<div id="red"></div>
<div id="blue"></div>
<p>
<button id="remove" type="button">Remove Red</button>

CSS

#red {
    display: inline-block;
    background-color: red;
    height: 200px;
    width: 200px;
}
#blue {
    display: inline-block;
    background-color: blue;
    height: 200px;
    width: 200px;
}

Javascript

$("#remove").on("click", function(event){
    if($('#remove').text()=="Remove Red") {
      $('#red').fadeOut();
      $('#remove').html("Restore Red");
    }else {
      $('#red').fadeIn();
      $('#remove').html("Remove Red");
    }
});
4

1 回答 1

4

您可以通过将红色滑动到 0 宽度状态来隐藏红色。这将导致右侧元素似乎滑入左侧的位置。

$('#red').animate({width:'toggle'});可以用来向左滑动。

您也可以包裹#red在另一个 div 中，然后淡入淡出#red，然后滑动容器以组合视觉效果。

于 2013-07-03T18:36:33.640 回答