Разверните и анимируйте Div вертикально и горизонтально - PullRequest
Новая
       41

Разверните и анимируйте Div вертикально и горизонтально

1 голос
/ 21 марта 2012

Я пытаюсь сделать так, чтобы div внутри моего слайдера карусели переключался и расширялся в больший div, который будет помещаться в карусель по щелчку и сбрасываться с новым содержимым div. Все расширяющиеся div, на которые я смотрел, только соскользнули, и старая информация о div осталась.

Это единственный JavaScript, который я нашел, но я не знаю, как применять его с новой информацией div при расширении. 

$("#expand").click(function(){
    $(".article-container").animate({
        width: "100px",
        height: "100px",
        top: "-50px",
        left: "-50px",
        opacity: 0.6,
    }, 1500 );
});

Вот CSS для контейнера до расширения и после. 

.article-container{
    float: left;
    width: 193px;
    height: 360px;
    margin: 0 13px 0 0;
}

.article-container-expand{
    float: left;
    width: 500px;
    height: 1000px;
    margin: 0 13px 0 0;
}

1 Ответ

0 голосов
/ 21 марта 2012

Если вы хотите применить изменения данных после анимации, вам нужно указать обратный вызов завершения для анимированного вызова: 

$("#expand").click(function(){
  $(".article-container").animate({
      width: "100px",
      height: "100px",
      top: "-50px",
      left: "-50px",
      opacity: 0.6,
    }, 
    { duration: 1500,
      complete: function() {
        // update the content here
        // this is the item being animated
      }
    }
  );
});

См. Документацию jQuery animate

.
...