製作跨度的高度等於它的父div的高度

我想改變一個元素的高度，使其符合其父母的：當表單通過POST方法製作跨度的高度等於它的父div的高度

<div id="div-login-msg" class="alert"> 
    <div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div> 
    <span id="text-login-msg">Some message</span> 
</div> 

#icon-login-msg 
{ 
    width: 30px; 
    float: left; 
    line-height: 28px; 
    text-align: center; 
    background-color: #dadfe1; 
    margin-right: 5px; 
    transition: all ease-in-out 500ms; 
}

文本的登錄，味精變化AJAX：

fadeMessage: function ($msgId, $msgText, $divTag, $iconTag) 
{ 
    var $msgAnimateTime = 150; 

    $msgId.fadeOut($msgAnimateTime, function() 
    { 
     $(this).text($msgText).fadeIn($msgAnimateTime, function() 
     { 
      $iconTag.height($divTag.height()); // line I'm interested in 
     }); 
    }); 
}, 

changeMessage: function ($divTag, $iconTag, $textTag, $divClass, $msgText) 
{ 
    var $msgShowTime = 5000; 
    var $msgOld = $divTag.text(); 
    MyNamespace.fadeMessage($textTag, $msgText, $divTag, $iconTag); 

    $divTag.addClass($divClass); 
    setTimeout(function() 
    { 
     MyNamespace.fadeMessage($textTag, $msgOld, $divTag, $iconTag); 
     $divTag.removeClass($divClass); 
    }, $msgShowTime); 
}

我如何可以改變提到的系列，使動畫漸變完成時，$ iconTag立刻變爲$ divTag.height？如圖所示使用它太慢了。

基本上，我要的是$divTag.height === $iconTag.height

請參閱本JSFiddle

來源

2017-01-15 Camilo Terevinto

您是否嘗試添加顯示：inline-block;跨度的CSS？ – MeltingDog

@MeltingDog沒有改變任何東西 –

我結束了添加此：

#text-login-msg 
{ 
    display: flex; 
}

和更改消息如何顯示：

fadeMessage: function ($msgId, $msgText, $divTag, $iconTag) 
{ 
    $msgId.text($msgText); 
    $iconTag.css("line-height", $divTag.height() + "px"); 
},

單獨transition: all ease-in-out提供的動畫比那種laggy動畫的更好完成.fadeIn和.fadeOut

請參閱updated fiddle

來源

2017-01-17 00:10:51

怎麼樣？

#text-login-msg { 
    display: block; 
    height: 100%; 
}

來源

2017-01-16 22:56:05

請在我的編輯中看到JSFiddle –

製作跨度的高度等於它的父div的高度

回答

相關問題