Не отображается карусель с товарами при нажатии кнопки на скрипте показать, скрыть

117
13 декабря 2020, 23:30
 $(document).ready(function() { 
      $("A#triggers").toggle(function() { 
        // Отображаем скрытый блок 
         $("DIV#boxs").fadeIn()[0].scrollIntoView(); // fadeIn - плавное появление
      },  
      function() { 
        // Скрываем блок 
        $("DIV#boxs").fadeOut(); // fadeOut - плавное исчезновение 
   return false; // не производить переход по ссылке
      }); // end of toggle() 
    }); // end of ready()

Есть работающий код появления, скрытия блока div по кнопке - ссылке. Проблема заключается в том, что в всплывающем блоке boxs, которому присвоен класс display:none находится карусель товаров. При открытии блока div- карусель не отображается, так как была скрыта. почему она не отображается, я так понимаю браузер не читает анимацию при display:none?

Answer 1

Если тебе нужно по нажатию на ссылку отображать/убирать div, то можно так:

$(document).ready(function() { 
  $('.more').on('click', function() { 
    $('.abc').fadeToggle(); 
  }); 
});
.abc { 
  background: black; 
  width: 100px; 
  height: 100px; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<a href="#" class="more">Привет 
  <div class="abc"></div> 
</a>

Answer 2

Желательно конкретно указывать на проблему, тут я вижу 2 варианта:

1й - слайдер не инициализируется после появления блока.
2й - проблема со стилями этого слайдера.

Решение 1го варианта:
Инициализируйте слайдер после вызова функции fadeIn().

OwlCarousel - $('.owl-carousel').owlCarousel(); или $('.owl-carousel').initialize();
Swiper - mySwiper.init()
Если другой - смотрите документацию, она у всех плагинов есть, но у всех разная

Answer 3
     function hideBoxsOnStart() {
                $('#boxs').hide();
            }
 setTimeout(hideBoxsOnStart, 1000);

Решили при помощи скрытия блока через секунду Это только часть кода

READ ALSO
Как сделать из 25 функций одну? [закрыт]
javascript

Как сделать из 25 функций одну? [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

 123
Добавление в бд WEB SQL через JS
javascript

Добавление в бд WEB SQL через JS

Нужна помощьЕсть бд через openDatabase, нужно сделать так, чтобы кнопка, например, переносила в таблицу данные из тэгов

 103
Как заблокировать спецсимвол &amp;times;
javascript

Как заблокировать спецсимвол &times;

Всем доброго вечера! У меня такая проблемаЕсть задание сделать меню с ценами и чтобы их можно было добавлять и удалять из заказа

 117
работа с SVG иконками (html+css)
CSS

работа с SVG иконками (html+css)

Очень нужна помощь знатоковСуть в том, что есть свг иконки, при наведении они должны меня цвет (обводку, заливку)

 129