如何在修改儿童身高时动画父母身高自动

我有一个家长div，身高设置为auto。如何在修改儿童身高时动画父母身高自动

现在，无论什么时候我在那个div的孩子身上淡化某些东西，高度就会跳到新的高度。我希望这是一个平稳过渡。

高度应该转变正在显示之前任何儿童，并且还过渡之后的任何的儿童被去除（display: none;）。

我知道这是可能的，当你知道预定义的高度，但我不知道如何我可以实现这个高度被设置为auto。

JSFiddle Demo

来源

2014-03-04 Kid Diamond

父DIV可能的子元素是否有已知的高度，或者是他们的高度由其内容给出？当时还有几个孩子总是只能看到一个孩子？ – Netsurfer

可能的子元素没有已知的高度。高度确实是由它们的内容给出的。是的，至少有一个孩子可见。 –

好的，所以你必须在**之前确定适当的孩子**的高度，你可以转换父母的高度。如何选择另一种方法：将父高度设置为零，并将其高度转换为已经显示的孩子？会更容易和更好的“更好”的效果。 – Netsurfer

您可以加载与display: none和slideDown()它，然后用动画不透明淡入新的内容。在你删除它，你只是淡出slideUp()

我想这是你想要的东西：jsFiddle

$(function() { 
    $("#foo").click(function() { 
     if($("#bar").is(":visible")) { 
      $("#bar").animate({"opacity": 0}, function() { 
       $(this).slideUp(); 
      }); 
     } 
     else { 
      $("#bar").css({ 
       "display": "none", 
       "opacity": 0, 
       /* The next two rows are just to get differing content */ 
       "height": 200 * Math.random() + 50, 
       "background": "rgb(" + Math.round(255 * Math.random()) + "," + Math.round(255 * Math.random()) + "," + Math.round(255 * Math.random()) + ")" 
      }); 
      $("#bar").slideDown(function() { 
       $(this).animate({"opacity": 1}); 
      }); 
     } 
    }); 
});

尝试，这也：jsFiddle。点击“点击我”添加新的div。点击一个新的div来删除它。

$(function() { 
    $("#foo").click(function() { 
     var newCont = $("<div>").css({ 
      "display": "none", 
      "opacity": 0, 
      "height": 200 * Math.random(), 
      "background": "rgb(" + Math.round(255 * Math.random()) + "," + Math.round(255 * Math.random()) + "," + Math.round(255 * Math.random()) + ")" 
     }); 
     $(this).append(newCont); 
     newCont.slideDown(function() { 
      $(this).animate({"opacity": 1}); 
     }); 
     newCont.click(function(e) { 
      $(this).animate({"opacity": 0}, function() { 
       $(this).slideUp(function() { 
        $(this).remove(); 
       }); 
      }); 
      return false; 
     }); 
    }); 
});

来源

2014-03-07 22:42:52 Mathias

我认为这应该是它。 1个问题，但为什么你使用不透明，而不是fadeOut /淡入？只是好奇。 –

@KidDiamond这是因为fadeOut会在最后添加'display：none'，折叠父div。通过动画不透明度，我可以使用slideUp和向下折叠。看到这个演示：http://jsfiddle.net/borglinm/xq8WF/ – Mathias

优秀的答案！ –

尝试使用开发者工具在浏览器中。

现在所有的浏览器都有它。（ctrl shift i）

如果你在执行fadeOut之后查看页面源代码，你会看到内联元素的内联样式“display：none”。这意味着你的内部元素没有高度了，这就是为什么outer（parent）元素折叠（height = 0）的原因。

这是所有浏览器的一个特性，块元素需要高度，除非你不会覆盖它。所以因为内部没有高度超过0 px的元素，父元素的高度将为0px;

Y可以使用CSS样式

height: 300px 
or 
min-height: 300px;

如果u使用jquery

来源

2014-03-04 13:08:27 simar

我不认为你理解我的问题。它不是特别关心淡出元素，而是用“height：auto”修改（更大或更小）时，平滑高度过渡。 –

试试这个修复:)

$(function() { 
    var height = $("#foo").height(); 
    $("#foo").click(function() { 
    var dis = $(".bar").css('display'); 

    if(dis == 'none'){ 
     $(this).animate({height:height+$(".bar").height()},2000,function(){ 
     $(".bar").show(); 
     }); 
    } 
     else{ 
     $(".bar").hide(); 
     $(this).animate({height:height-$(".bar").height()},2000); 
     } 

    }); 
}); 

#foo { 
    height: auto; 
    background: #333; 
    color: white; 
    min-height: 20px; 
}

来源

2014-03-04 13:49:17 Manoj

这不是我的问题的解决方案。在儿童被展示之前，高度应该过渡，并且在儿童被隐藏后进行过渡。此外，你的代码不断增加高度。 –

好吧。靠近它。当你连续点击真实时，高度和动画开始变得非常糟糕。 –

它的jQuery API的行为，如果你继续点击真正的快速连续。我认为这不是缺点，因为没有人会像这样点击。 – Manoj

我采取的方法是看是否.bar这是正确的覆盖它是可见的，并且如果是这样淡出，那么将#foo的高度动画化回到其开始的位置，或者将其动画到.bar + 012的高度否则，在这两种情况下使用回调来获得您正在寻找的效果。

代码：

$(function() { 
    var start_height = $('#foo').outerHeight(); 
    $("#foo").click(function() { 
     $bar = $('.bar'); 
     $foo = $(this); 
     if($bar.is(':visible')) { 
      $bar.fadeToggle('slow', function() { 
       $foo.animate({height: start_height}); 
      }); 
     } else { 
      $foo.animate({height: ($bar.outerHeight()+start_height)+'px'}, 'slow', function() { 
       $bar.fadeToggle(); 
      }); 
     } 
    }); 
});

Fiddle.

编辑：

新增.stop()以防止意外的行为，当双点击。

Updated Fiddle.

来源

2014-03-05 14:44:57 Samsquanch

如何在修改儿童身高时动画父母身高自动

回答

相关问题