Bymas | Плавное появление блока

Тема закрыта by

SNEG

Как сделать чтобы плавно появлялся блок (выезжал)?
https://jsfiddle.net/65xyzvmj/2/
________
посл. ред. 30.06.2023 в 21:50; всего 1 раз(а); by SNEG

css

div {

  position: relative;

  left: -70px;

  width: 100px;

  height: 50px;

  background: #000;

  margin-top: 5px;

  transition: left .2s linear;

}



div:hover {

  left: 0px;

}

html

<div></div>

<div></div>

<div></div>

<div></div>

Либо

css

* {

  box-sizing: border-box;

}



ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



li {

  display: block;

  width: 200px;

  height: 50px;  

  margin: 10px 0;

  background: #ccc;

  border: 1px solid #000;

  border-radius: 4px;

  cursor: pointer;

  

  -webkit-transition: all .3s ease-in-out;

  -moz-transition: all .3s ease-in-out;

  -ms-transition: all .3s ease-in-out;

  -o-transition: all .3s ease-in-out;

  transition: all .3s ease-in-out;

  -webkit-transform: translateX(-90;

  -moz-transform: translateX(-90;

  -ms-transform: translateX(-90;

  -o-transform: translateX(-90;

  transform: translateX(-90;

}



li:hover {

  -webkit-transform: translateX(0 % );

  -moz-transform: translateX(0 % );

  -ms-transform: translateX(0 % );

  -o-transform: translateX(0 % );

  transform: translateX(0 % );

}

________
посл. ред. 30.06.2023 в 22:04; всего 3 раз(а); by Ramzesoff

Ramzesoff (30 июня 2023, в 22:01)

css

div {

  position: relative;

  left: -70px;

  width: 100px;

  height: 50px;

  background: #000;

  margin-top: 5px;

  transition: left .2s linear;

}



div:hover {

  left: 0px;

}

html

<div></div>

<div></div>

<div></div>

<div></div>

Либо

css

* {

  box-sizing: border-box;

}



ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}



li {

  display: block;

  width: 200px;

  height: 50px;  

  margin: 10px 0;

  background: #ccc;

  border: 1px solid #000;

  border-radius: 4px;

  cursor: pointer;

  

  -webkit-transition: all .3s ease-in-out;

  -moz-transition: all .3s ease-in-out;

  -ms-transition: all .3s ease-in-out;

  -o-transition: all .3s ease-in-out;

  transition: all .3s ease-in-out;

  -webkit-transform: translateX(-90;

  -moz-transform: translateX(-90;

  -ms-transform: translateX(-90;

  -o-transform: translateX(-90;

  transform: translateX(-90;

}



li:hover {

  -webkit-transform: translateX(0 % );

  -moz-transform: translateX(0 % );

  -ms-transform: translateX(0 % );

  -o-transform: translateX(0 % );

  transform: translateX(0 % );

}

hover при наведении а мне по клику
И кажется уже если с hover то можно и без jquery
________
посл. ред. 30.06.2023 в 22:09; всего 1 раз(а); by SNEG

html

<button>click</button>

<div class="block">

  content

</div>

css

.block {

  transition: all 0.3s ease;

  opacity: 0;

  z-index: -1;

}

.block.active {

  transition: all 0.3s ease;

  opacity: 1;

  z-index: 1;

}

javascript

$('button').click(function() {

    $('.block').toggleClass('active');

});

Можно добавить fadeToggle, slideToggle. Тут надо смотреть как будет у тебя

Плавное открытие и скрытие блока div средствами jQuery

Ramzesoff (30 июня 2023, в 22:22)
Плавное открытие и скрытие блока div средствами jQuery

для slideToggle в transition время указывать ?

SNEG (30 июня 2023, в 22:23)
для slideToggle в transition время указывать ?

Нет

SNEG (30 июня 2023, в 22:23)
для slideToggle в transition время указывать ?

$('#link_com').click(function(){
$('#box_com').fadeToggle();
});

Но у человека, скрывается сама ссылка при загрузке страницы. Когда использовал выше код

Ramzesoff (30 июня 2023, в 22:24)
Нет

Я походу что-то не то сообразил, забей, к примеру блок откроется наложится на верх а как его закрыть.
Завтра уже буду пробовать через addclass и remove
Нашёл пару примеров
________
посл. ред. 30.06.2023 в 22:27; всего 1 раз(а); by SNEG