JQuery анимация не работает должным образом

Question

JQuery анимация не работает должным образом

0

Проверьте мою часть кода здесь http://jsfiddle.net/metalshan/eHG6X/ Что я хочу, если я нажму на зеленую полосу в левой части, ее ширина должна переключиться на 10% и 20%. При этом правая сторона также должна переключать ее ширину. Здесь левая часть работает хорошо, но когда я запускал функцию анимации для "#content",

    $("#content").animate({
        width: '90%'
    })

он показывает анимацию #content, а не divs внутри нее. Если вы увидите код в jsFiddle, вы поймете.

Paul Shan 26 сен. 2013, в 09:04

Источник

Теги:

jquery

html5

jquery-animate

2 ответа

0

Измените его на

$("#content").animate({ width: '90%'}, 100)

Ronjon 26 сен. 2013, в 04:20

Ещё вопросы

Itay · Accepted Answer · 2013-09-26T05-22-00.000Z

Используйте absolute positioning вместо плавания, и проблема решена.

jsFiddle Demo

#container{
    overflow: hidden;
}    
#lower{
    position: relative;
}
#nav{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
#content{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}

Редактировать:

Еще лучший вариант - использовать absolutely positioned table, а затем вы можете анимировать только одну панель, а не обе из них.

jsFiddle Demo

CSS:

html,body{
    overflow: hidden;
}
#container{
    overflow: hidden;
}
#lower{
    width:100%;
    height:90%;
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    display: table;
}
#nav{
    display: table-cell;
    height: 100%;
    width:20%;
}
#content{
    display: table-cell;
    width:80%;
    height:100%;
}

JQuery:

$("#nav").click(function(){
    if (isSmall) $(this).animate({ width:'20%' })
    else         $(this).animate({ width:'10%' })

    isSmall=!isSmall;
});

Спасибо ... это именно то, что я хотел. Большое спасибо!