Animation on add/remove class

Question

I'am trying to set animation on addclass and removeclass, but unfortunately its not working.

So thats my code:

 jQuery(function($) {
            $("#top").on("mouseenter", function() {
                $(this).find(".nav-parent").removeClass("hide4e");
                $(this).find("footer").removeClass("hide4e");
            }).on("mouseleave", function() {
                $(this).find(".nav-parent").addClass("hide4e");
                $(this).find("footer").addClass("hide4e");
            });
        });

I found 2 solutions -

with jquery ui - not working
with css transions which also not working

 jQuery(function($) { $("#top").on("mouseenter", function() { $(this).find(".nav-parent").removeClass("hide4e"); //$(this).find("footer").removeClass("hide4e"); }).on("mouseleave", function() { $(this).find(".nav-parent").addClass("hide4e"); //$(this).find("footer").addClass("hide4e"); }); });

 .nav-parent { background-color: rgba(0, 0, 0, 0.9); -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } .hide4e { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <body id="top" class="album-template-default single single-album postid-51 apollo_validation_on wide wp-3_8"> <!--iw--> <div id="iw-container"> <div id="root"> <div id="whole-bg-image"> <div id="album-controls"> <span id="prevslide" class="arrow-left"></span> <span id="play-button" class="action" data-play="Play" data-pause="Pause"></span> <span id="nextslide" class="arrow-right"></span> </div> </div> <div id="header-container" class="glass"> <header id="header" class="glass"> <div class="add-ons clearfix"> <div class="content"> </div> </div> <!-- STACKOVERFLOW NEEDED START --> <div class="nav-parent"> <nav id="access" role="navigation"> <a id="logo" href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>index.html" title="AlexValtchev.com &#8211; Alex Valtchev Photography" rel="home"><img src="https://vimastudio.com/images/vsLogo.png" alt="AlexValtchev.com &#8211; Alex Valtchev Photography" /></a> <h3 class="assistive-text">Main menu</h3> <a class="assistive-text" href="#begin-of-content" title="Skip to primary content">Skip to primary content</a> <a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a> <div class="menu-container"> <div class="mobtn"></div> <div id="iw-header-button"><div class="img"></div></div> <ul id="menu-menuen-1" class="top-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-35"><a href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>index.php"><span>Начало</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>about.php"><span>За нас</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>portfolio.php"><span>Портфолио</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-32"><a href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>blog.php"><span>Блог</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>allclients.php"><span>Клиенти</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>partners.php"><span>Партньори</span></a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="<?php echo 'https://'.$_SERVER['SERVER_NAME'].'/'; ?>contacts.php"><span>За контакти</span></a></li> </ul> </div> </nav><!-- #access --> </div> <!-- STACKOVERFLOW NEEDED END --> </header> </div> <!-- /#header-container --> <div id="mid" class="clearfix full-width"> <div class="seo-album"> <div class="brick"> <div></div> </div> </div> <div id="album-things" class="load-item"> <em id="prev-thumb"></em> <em id="next-thumb"></em> <!--Slide captions displayed here--> <div class="desc-and-list"> <div id="slide-text"> <div class="inner"> <h1 class="caption"></h1> <div class="descpription"></div> <span id="close-text" title="Hide description"></span> </div> </div> <div id="text-controls" class="position-holder"> <span id="show-text" class="action" title="Show description"></span> </div> </div> <!--Thumbs--> <div id="other-albums"></div> <div id="thumb-tray"> <div class="inner"> <span id="prev-tray-thumb" class="arrow-left"></span> <span id="next-tray-thumb" class="arrow-right"></span> </div> </div> <!--Thumb Tray button--> <div id="tray-button" title="Show thumbnails"></div> <!--Time Bar--> <div id="progress-back"> <div id="progress-bar"></div> </div> </div> <div id="album-icons" class="album-icons"> <a class="info-ico" title="Show description"></a> </div> </div> <!-- #mid --> <style> .nav-parent { transition: opacity 1s, height 0s 1s; } .hide4e { display: none; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } </style> <script> jQuery(function($) { $("#top").on("mouseenter", function() { $(this).find(".nav-parent").removeClass("hide4e"); $(this).find("footer").removeClass("hide4e"); }).on("mouseleave", function() { $(this).find(".nav-parent").addClass("hide4e"); $(this).find("footer").addClass("hide4e"); }); }); </script>

html is mess here, but needed part is between and

So is there any other solution for this?

Thank you!

Answer 1

Okay, so I cant animate display: none, so I used visibility: hidden; opacity: 0; to hide the elements. Thank you all!

Animation on add/remove class

Question

1 answers

solution1
0 ACCPTED 2018-10-18 15:54:38

Animation on add/remove class

Question

1 answers

solution1 0 ACCPTED 2018-10-18 15:54:38

solution1
0 ACCPTED 2018-10-18 15:54:38