2017-01-15 6 views
0

Я хочу изменить высоту такого элемента, чтобы сделать его соответствие своего родитель:высоты пролета уравнять высоты родительского 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; 
} 

enter image description here

текст вход-сообщ меняется, когда форма помещается через 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

+0

Вы пробовали добавить дисплей: встроенный блок; для CSS-кода span? – MeltingDog

+0

@MeltingDog ничего не менял –

ответ

0

Я в конечном итоге, добавив это:

#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 лучше, чем вид лага анимации сделано по .fadeIn и .fadeOut

См. updated fiddle

0

о чем?

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

Пожалуйста, смотрите JSFiddle в моем редактировании –

Смежные вопросы