JavaScript animate изменение размера div

Я пытаюсь разместить небольшую анимацию на странице. У меня есть 2 divs бок о бок, второй из которых имеет свой контент, который вызывается через Ajax, поэтому высота div изменяется без обновления страницы.JavaScript animate изменение размера div

<div id="number1" style="float:left; padding-bottom:140px">Static content, 200px or so</div> 
<div id="number2" style="float:left">AJAX content here</div> 
<div style="clear:left"></div> 
<img src="image" margin-top:-140px" />

В основном это дает мне компоновку 2 колонки, и изображение гнезда вверх под левой колонке независимо от того, что высота. Все хорошо!

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

Возможно ли это? Я не совсем вхожу в свой JavaScript, поэтому не знаю, как это сделать. Я использую библиотеку jQuery на сайте, так что это может быть путь вперед?

источник

2009-06-24 MrFidge

ОК, я только что собрал очень быстрый и грязный пример.

Вот HTML:

<body> 
     <a href="####" id="addContent">Add content</a> 
     <div id="outerContainer"> 
      <div id="left" class="col"> 
       <p>Static content</p> 
       <img src="images/innovation.gif" width="111px" height="20px"> 
      </div> 
      <div id="right" class="col"> 
       <p>Ajax content</p> 
      </div> 
     </div> 
    </body>

JQuery используется здесь

jQuery(function($){ 
    var addedHTML = "<p class='added'>Lorem ipsum dolor sit amet, Nunc consectetur, magna quis auctor mattis, lorem neque lobortis massa, ac commodo massa sem sed nunc. Maecenas consequat consectetur dignissim. Aliquam placerat ullamcorper tristique. Sed cursus libero vel magna bibendum luctus. Nam eleifend volutpat neque, sed tincidunt odio blandit luctus. Morbi sit amet metus elit. Curabitur mollis rhoncus bibendum. Phasellus eget metus eget mi porttitor lacinia ac et augue. Nulla facilisi. Nam magna turpis, auctor vel vehicula vitae, tincidunt eget nisl. Duis posuere diam lacus.</p>"; 

    $("#addContent").click(function(e){ 
     $("#right").append(addedHTML); 
     var rightHeight = $("#right").height(); 

     //Animate the left column to this height 
     $("#left").animate({ 
      height: rightHeight 
     }, 1500); 
    });});

И CSS:

#outerContainer { 
     position: relative; 
     border: 1px solid red; 
     margin: 20px auto 0; 
     overflow: hidden; 
     width: 400px;} 
    .col { 
     width: 180px; 
     display: inline; 
     padding: 0 0 40px;} 
    #left { 
     float: left; 
     border: 1px solid cyan; 
     position: relative;} 
    #left img { 
     position: absolute; 
     bottom: 0; 
     left: 0;} 
    #right { 
     position: absolute; 
     top: 0; 
     left: 180px; 
     border: 1px solid green;} 
    #addContent { 
     text-align: center; 
     width: 100px; 
     margin: 20px auto 0; 
     display: block;}

Я добавил кнопку просто добавить содержимое некоторых 'Аякса' , Когда вы делаете это, он захватывает новую высоту div и оживляет эту высоту. Вы можете добавить некоторое ослабление анимации/изменить скорость, чтобы сделать ее немного более полированной.

Надеюсь, это поможет.

источник

2009-06-24 15:17:43 Nooshu

вы можете предоставить демонстрацию в реальном времени для OP, поставив код на http://jsbin.com, а затем связавшись с сохраненным общедоступным URL-адресом –

. О, спасибо за подсказку. Это звучит намного проще, чем то, что я сделал выше :) – Nooshu

Хорошо, вот версия jsbin http://jsbin.com/uyoxi. Я прикрепил изображение к нижней части левого столбца в моей версии dev, но вы должны увидеть, где код должен его редактировать. уф! – Nooshu

Возможно, вы можете использовать контейнер вокруг разделов содержимого (с переполнением скрытый) и изменить его размер в соответствии с высотой содержимого, тем самым достигая того, что вы пытаетесь сделать?

источник

2009-06-24 10:13:07

ОК, но как бы я мог оживить изменение размера, вот что мне действительно нужно понять. – MrFidge

Согласен с ответом выше. Вы можете применить изображение в качестве фонового изображения к контейнеру, а затем анимировать контейнер. Таким образом, фоновое изображение будет перемещаться вниз с контейнером (при условии, что вы привяжете его к нижней части!)

источник

2009-06-24 13:16:57 Nooshu

А, я, вероятно, должен был быть более конкретным - я поставил здесь код, показывающий изображение, но иногда это должен быть флеш-файл, поэтому нельзя использовать свойство background: url(). – MrFidge

JavaScript animate изменение размера div

ответ

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