1

введите сюда описание изображения

Ширина или высота блока 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>

3
  • При такой постановке задачи не получится это сделать красиво, так как у тебя блоки видимы и уже спозиционированы "дефолтно". Конкретизируй задачу (для чего это, что за контент или это просто спортивный интерес). Скорее всего придется делать это через контейнер с overflow: hidden и смещением внутри него. 23 июн 2018 в 21:48
  • карте есть стрелки по умолчанию у них ширина 0 то есть их не видно и потом при увевеличении ширины появляется эфект её движения не следующую точку. Смешать точку нельзя так как линия должны выходить с определенной точки. Добавил скриншот
    – bad code
    24 июн 2018 в 6:26
  • Рассчитывать от позиции клика мышкой, а также если блок не помещается в ширине или высоте, смещать на столько, на сколько не поместился.
    – And
    24 июн 2018 в 6:33

2 ответа 2

2

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

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

$(".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>

-3

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

Ваш ответ

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

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