Question

我有三个带浮动的div：left

<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-div之下，因为div都是浮动的所以我的内容只会出现在应该隐藏它们的淡入淡出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更改。

Answer 2

也许。淡出但不隐藏:)。

$('.fade1').click(function(){
   $('.fade1').animate({'opacity':0},700);   
});

这不会显示：none。所以你的div将在它的区域内。

将浮动div放在彼此之上

2 个答案: