jquery - 将 float div 放在彼此之上

Question

我有三个带有 float:left 的 div

<div class="center">
 <div class="fade1"></div>
 <div class="fade2"></div>
 <div class="fade3"></div>
</div>

我想点击它们并显示应该在它们下方的内容 我可以使用 jquery 淡出它们

$('.fade1').click(function(){
$('.fade1').fadeOut(700);   
});

所以我需要在中心 div 中放置 3 个内容 div 问题是我不能将它们恰好放在 fade-divs 下面，因为 div 都是 float 的 所以我的内容只会出现在应该隐藏它们的淡入淡出 div 旁边

Answer 1

给你:jsFiddle
实现这个的脚本是:

$(function() {
  $('.fade').click(function() {
    var $this = $(this);
    var $content = $('#' + $this.attr('id') + '_content');

    $this.fadeOut(700, function() {$this.before($content.show());});
  });
});

参见 jsFiddle html 和 css 更改。