Jquery animate внутри оболочек со скрытым ограничением переполнения - PullRequest
Новая
       20

Jquery animate внутри оболочек со скрытым ограничением переполнения

1 голос
/ 25 января 2012

Моя проблема немного сложна для меня, поэтому я постараюсь быть точным и ясным. У меня есть div, называемый "обертка". В этом div у меня есть div с именем "contentWrapper", ширина которого больше, чем у "wrapper". Переполнение для «обертки» скрыто. «contentWrapper» содержит четыре div. При нажатии на один из этих элементов div я хочу, чтобы «contentWrapper» переместился на 200 пикселей влево.

С моим кодом это не работает. Если я добавлю позицию: абсолютно к "contentWrapper", анимация будет работать, но переполнение уже не будет скрыто ... Я надеюсь, что кто-то может помочь. Заранее благодарю за ваши ответы. Приветствия. Марк.

Мой HTML: 

<div id="wrapper">
      <div id="contentWrapper">
          <div id="contentOne" class="content">This is contentOne</div>
          <div id="contentTwo" class="content">This is contentTwo</div>
          <div id="contentThree" class="content">This is contentThree</div>
          <div id="contentFour" class="content">This is contentFour</div>
    </div>
</div>

Мой CSS: 

#wrapper{
    width:960px;
    height:auto;
    margin:0 auto;
    background-color:rgba(238,221,130,0.6);
    border:5px solid purple;
    overflow:hidden;}

#contentWrapper{
    width:1910px;
    height:auto;
    background-color:rgba(70,130,180,0.4);
    float:left;}

.content{
    width:465px;
    height:auto;
    margin:10px 0 10px 10px;
    padding:0;
    background-color:rgba(205,92,92,0.4);
    float:left;}

Мой JS: 

$('.content').click(function() {

    $('#contentWrapper').animate({
        "left": "-=200px"
    }, "fast");

});

Ответы [ 2 ]

4 голосов
/ 25 января 2012

Проверьте это jsFiddle .

Разве вы не ожидаете такого поведения?

0 голосов
/ 25 января 2012

Вы можете попробовать положение: абсолютное;на # wrapper.

Вы хотите, чтобы различные области содержимого были рядом друг с другом, верно?Если это так, то вам может потребоваться позиция: относительная на .content, чтобы сработал float: left.

...