Анимация отделения, в то время как это соответствует к динамично загруженному содержанию

Question

Анимация отделения, в то время как это соответствует к динамично загруженному содержанию

У меня есть два Отделения (внешнее) 'содержание' и (внутренняя) 'информация'. 'информация' динамично загрузит данные из 4-5 внешних файлов HTML. 'содержание' просто содержит просто черный фон. Теперь мне удалось загрузить HTML, но я хочу, чтобы плавная анимация фона ('содержание') перенесла внутреннее отделение согласно содержанию. Мой текущий код переносит его, но я хочу, чтобы фоновый переход медленно происходил.

HTML:

<div id="menu-content">
<div id="info"></div>
</div>

CSS этих двух отделений:

#contents {
    background:rgba(0,0,0,0.2);
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    margin:0px 25px 25px 25px;
    position:relative;
    opacity:0;
    color: #F4F4F4;
    float: left;
}

#info {
    position:relative;
    color: #F4F4F4;
    padding: 15px 25px;
    float:left;
}

Код.JS:

$('#info').css('opacity','0').load('company.html');

var width = $('#info').css("width") + 50;
var height = $('#info').css("height") + 30;

$('#contents').css('opacity','1').animate({
    'width': width, 'height': height
}, 300, function(){
    $('#info').animate({'opacity':'1'},500)
});

Очень в новинку для jQuery, поэтому отнеситесь ласково ко мне..Спасибо.

1

jquery

задан gevorg 12 June 2016 в 20:15

1 ответ

Другие вопросы по тегам:

jquery

Похожие вопросы:

score 2 · Answer 1

Вот как бы я это сделал. ( А вот пример )

HTML: То же.

CSS:

#menu-content {
    /* same */
}

#info {
    position:relative;
    color: #F4F4F4;
    float:left;
    opacity:0;
    width:0; height:0; padding:0;
}

Первоначально установите для параметра #info непрозрачность, ширину, высоту и отступы значение 0.

JS:

    var $mci = $('#info'); // cache #info

    $mci.load('company.html'); // load content

    // Set width, height, and padding to their final state
    $mci.css({'width':'auto','height':'auto', 'padding':'15px 25px'});
    // Capture width and height
    var contentWidth = $mci.width();   
    var contentHeight = $mci.height();
    // Reset to 0
    $mci.css({'width':'1px','height':'0','padding':'0'}); // width 0 doesn't work

    $('#menu-content').css('opacity','1'); // show container
    // animate growth
    $mci.animate({
        'opacity':1,
        'width':contentWidth+'px', // width() returns int, so add 'px'
        'height':contentHeight+'px', // height() returns int, so add 'px'
        'padding':'15px 25px'}, 500);

});

Надеюсь, что все имеет смысл (и работает на вас).