There is such a plugin called TypeIt. I want to make a menu on the site, with the effect of the printed text. That is, there is no menu initially (there is only a button), you click on the "print" menu button, then I press the button a second time and the menu magically disappears. By trial and error, I realized that the option of changing the class and the display: inline/none property as a menu hide / display does not work: the plug-in simply does not update and when you try to call the menu a second time, only a blinking cursor appears. Then I decided to completely remove and add menus to the site using the append method, and then launch the plugin. But nothing works. Help link these two scripts together.

 <script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script> <button class="menu_btn"></button> <div class="menu-content" id="menu-content"></div> $(document).ready(function() { var menuBtn = $('.menu_btn'); menuBtn.click(function(event) { if (event.target.classList.contains('menu_btn_active')) { $(".effects").fadeOut(); setTimeout(function () { $(".effects").remove(); }, ); } else { $(".menu-content").append("<div class='effects' style='display: none;'>Эффект</div>"); $(".effects").fadeIn(); } menuBtn.toggleClass('menu_btn_active'); return false; }); }); $(document).ready(function() { menuBtn.click(function(event) { new TypeIt('.effects', { }); }); });

1 answer 1

Plugin documentation reset() method

It should be something like this.

 var menuBtn = $('.menu_btn'); $(document).ready(function() { menuBtn.click(function(event) { if (!$(this).hasClass('menu_init')) { $(".effects").fadeIn(); new TypeIt('.effects', { ........... }) } if (!$('.effects').hasClass('menu_btn_active')) { $('.effects') .fadeIn() .addClass('menu_btn_active') .reset(); } else { $('.effects').removeClass('menu_btn_active').fadeOut() } return false; }); });
  • prntscr.com/kkqm3m prntscr.com/kkqmi7 - Pavel Bogdanov
  • @PavelBogdanov Well, you need to add the code for the plugin itself before executing the script. - Egor Zholnin
  • @PavelBogdanov Well, yes. I just gave an example of the code that you should write. Before that, you need to add a button, a menu, jquery scripts and a plugin to the markup. I do not know the subtleties of this plug-in, so the code given in the answer is conditional and may require adjustments. - Egor Zholnin