Появление блок при клике

229

01 августа 2018, 20:20

Ширина или высота блока 0px. При клике ему присваиватеся, допустим, значение 100px и обьект появляется слева на право или же сверху вниз.

Как сделать чтобы он начина появляться справа налево или же снизу вверх?

$('.ver').click(function(){ 
$(this).animate({height: '100px'}, 1000); 
}); 
$('.hor').click(function(){ 
$(this).animate({width: '100px'}, 1000); 
});

.ver { 
background: green; 
width: 30px; 
margin-bottom: 30px; 
} 
.hor { 
background: red; 
width: 30px 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="ver">click</div> 
<div class="hor">click</div>

Answer 1

Ну это наверно больше хак ...смотрите

смотреть на весь экран

$(".item").click(function(){ 
 
$(this).css({ 
  "width":"100px", 
  "height":"150px", 
  "transform":"translateX(-100px)" 
}); 
  $(this).dblclick(function(){ 
$(this).removeAttr("style"); 
  }) 
}); 
 
$(".item2").click(function(){ 
 
$(this).css({ 
  "height":"250px", 
  "transform":"translateY(-250px)" 
}); 
  $(this).dblclick(function(){ 
$(this).removeAttr("style"); 
  }) 
});

*{ 
  margin:0; 
  padding:0; 
} 
.item{ 
  position:fixed; 
  top:30px; 
  left:350px; 
  background:red; 
  width:20px; 
  height:20px; 
  transition:.5s; 
  transform-origin:right top; 
} 
.item2{ 
  position:fixed; 
  top:350px; 
  left:50px; 
  background:blue; 
  width:30px; 
  height:30px; 
  transition:.5s; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<div class="item"></div> 
<div class="item2"></div>

Answer 2

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