1

Подскажите, пожалуйста, как заставить НЕ сдвигаться остальные div? И как сделать, чтобы увеличение шло для 1-го div (слева-сверху), 2-го(справа сверху), 3-го(слева-снизу) и 4-го (справа-снизу), с перекрытием всех остальных div'ов. Может надо использовать scale (x), вместе с transform-origin (x, y)? Но тогда все увеличивается мгновенно, а не плавно. Подскажите, как добиться нужного эффекта?

$( ".diva" ).click(function() {
  $( this ).toggleClass( "diva_act",1000);
});
.diva {
  background: red;
  width: 300px; height: 300px;
  margin: 5px;
  float: left;
  text-align: center;
}
.diva_act {width: 100%; height: 100%; background: blue;}
.posit {
  background: green;
  height: 650px; width: 650px;
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  overflow: hidden;
}
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="posit">
<div class="diva"><h1>1</h1></div>
<div class="diva"><h1>2</h1></div>
<div class="diva"><h1>3</h1></div>
<div class="diva"><h1>4</h1></div>
</div>

1
  • 1
    У вас действительно жестко зашиты размеры всех div-ов? Почему бы тогда не использовать абсолютное позиционирование вместо float:left для .diva?
    – Nickolay
    2 авг 2015 в 13:54

1 ответ 1

3

Как @Nickolay сказал, можно абсолютной позиционирование ввести:

css

.diva {width: 300px; height: 300px; background: red; margin: 5px; text-align: center; position: absolute;}
.diva_act {width: 100%; height: 100%; background: blue}
.posit {background: green; height: 650px; width: 650px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: hidden;}

html

<div class="posit">
 <div class="diva"><h1>1</h1></div>
 <div class="diva" style="right: 5px;"><h1>2</h1></div>
 <div class="diva" style="bottom: 5px;"><h1>3</h1></div>
 <div class="diva" style="bottom: 5px; right: 5px;"><h1>4</h1></div>
</div>

Пример тут http://jsfiddle.net/9pnne6g4/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.