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

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

SNEG

Как сделать чтобы плавно появлялся блок (выезжал)?
[url=]https://jsfiddle.net/65xyzvmj/2/[/url]
________
посл. ред. 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