Пытается найти скрипт для повторной калибровки квадратов - Какие-нибудь предложения?

Question

Мне нужен сценарий, желательно JQuery, чтобы сделать происходит некорректно:

У меня есть четыре маленьких квадратиков (т.е. DIV метки) каждые другой цвет вложенного вместе, чтобы сделать ОДИН БОЛЬШОГО Sqaure.

КОГДА Я ОБЯЗАЛ ОДНУЮ МАЛЕНЬКУЮ ПЛОЩАДКУ, ЭТО УВЕЛИЧИВАЕТ И ОБОЛОЧИТСЯ ПОЛНУЮ ГОРЮ. Когда я уйду от мыши, увеличенный квадрат вернется к первоначальному размеру в гнезде.

Надеюсь, вы это поняли.

Есть ли сценарий, который будет делать это?

Аналогичная идея анимации и изменения размера можно найти на веб-сайте Sprint: link text

Но я хочу, чтобы анимация увеличенной площади для покрытия трех других квадратов в гнезде.

Большое спасибо всем.

Erik

Answer 1

Это должно делать то, что вы хотите:

HTML

<div class="nest"> 
    <div class="square red"></div> 
    <div class="square blue"></div> 
    <div class="square green"></div> 
    <div class="square yellow"></div> 
</div>  

CSS

/* Creates the coordinate system for absolutely positioned squares */ 
.nest { 
    position: relative; 
    width: 200px; 
    height: 200px; 
} 

.square { 
    position: absolute; 
    z-index: 1; 
    width: 100px; 
    height: 100px; 
} 

.red { 
    top: 0; 
    left: 0; 
    background-color: red; 
} 

.blue { 
    top: 0; 
    left: 100px; 
    background-color: blue; 
} 

.green { 
    top: 100px; 
    left: 0; 
    background-color: green; 
} 

.yellow { 
    top: 100px; 
    left: 100px; 
    background-color: yellow; 
} 

JQuery

$('.square').each(function(){ 

    var origTop = $(this).offset().top; 
    var origLeft = $(this).offset().left; 

    $(this).hover(
     /* mouseover */ 
     function(){ 
      $(this).css({zIndex: 2}); 
      $(this).stop(); 
      $(this).animate({ 
       top: 0, 
       left: 0, 
       width: 200, 
       height: 200 
      }); 
     }, 
     /* mouseout */ 
     function(){ 
      $(this).stop(); 
      $(this).animate({ 
       top: origTop, 
       left: origLeft, 
       width: 100, 
       height: 100 
      }, function(){ 
       $(this).css({zIndex: 1}); 
      }); 
     } 
    ); 
});