JQuery переходный класс переключения не работает

Question

Я также пробовал это, добавляя css-переходы для переключения классов, но они также не работают. Ничего не произошло.

Пожалуйста, смотрите эту скрипку:
https://jsfiddle.net/n1rz7jqp/

Jquery:

$('.right-side-menu').on('click', function() { 
    $('.right-side-menu-collapsed').slideToggle(); 
}); 

$('.hamburger-icon').on('click', function() { 
    $('.my-container').toggleClass("my-container-toggle", 1000, "easeOutSine"); 
    $('.left-navigation-collapsed').toggleClass("left-navigation-toggle", 1000, "easeOutSine"); 
}); 

$('.list-toggler-1').on('click', function() { 
    $('.firstlist').toggleClass("list-visible"); 
}); 

$('.list-toggler-2').on('click', function() { 
    $('.secondlist').toggleClass("list-visible"); 
}); 

$('.list-toggler-3').on('click', function() { 
    $('.thirdlist').toggleClass("list-visible"); 
}); 

$('.list-toggler-4').on('click', function() { 
    $('.fourthlist').toggleClass("list-visible"); 
}); 

$('.list-toggler-5').on('click', function() { 
    $('.fifthlist').toggleClass("list-visible"); 
}); 

$('.list-toggler-6').on('click', function() { 
    $('.sixthlist').toggleClass("list-visible"); 
}); 

$('.list-toggler-7').on('click', function() { 
    $('.seventhlist').toggleClass("list-visible"); 
}); 

Я хочу навигации, чтобы открыть с переходом при нажатии значка гамбургер. https://jsfiddle.net/knkf4ocu/1/

Answer 1

transition эффект не работает на display:none и display:block. Вместо этого вы должны играть с левой позиции, как следующее:

$('.right-side-menu').on('click', function() { 
 
    $('.right-side-menu-collapsed').slideToggle(); 
 
}); 
 

 
$('.hamburger-icon').on('click', function() { 
 
    $('.my-container').toggleClass("my-container-toggle", 1000, "easeOutSine"); 
 
    $('.left-navigation-collapsed').toggleClass("left-navigation-toggle", 1000, "easeOutSine"); 
 
}); 
 

 
$('.list-toggler-1').on('click', function() { 
 
    $('.firstlist').toggleClass("list-visible"); 
 
}); 
 

 
$('.list-toggler-2').on('click', function() { 
 
    $('.secondlist').toggleClass("list-visible"); 
 
}); 
 

 
$('.list-toggler-3').on('click', function() { 
 
    $('.thirdlist').toggleClass("list-visible"); 
 
}); 
 

 
$('.list-toggler-4').on('click', function() { 
 
    $('.fourthlist').toggleClass("list-visible"); 
 
}); 
 

 
$('.list-toggler-5').on('click', function() { 
 
    $('.fifthlist').toggleClass("list-visible"); 
 
}); 
 

 
$('.list-toggler-6').on('click', function() { 
 
    $('.sixthlist').toggleClass("list-visible"); 
 
}); 
 

 
$('.list-toggler-7').on('click', function() { 
 
    $('.seventhlist').toggleClass("list-visible"); 
 
});

.homeTopLink .sf-menu { 
 
    font-size: 11px; 
 
    font-weight: bold; 
 
} 
 

 
.homeTopLink .sf-menu li { 
 
    float: left; 
 
    list-style: none; 
 
    padding-right: 9px; 
 
} 
 

 
.site-header-992px { 
 
    display: none; 
 
} 
 

 
.my-container { 
 
    position: relative; 
 
    transition: all .5s; 
 
    left:0; 
 
} 
 

 

 
@media screen and (max-width: 992px) { 
 
    .page-header { 
 
    margin-top: 0px; 
 
    } 
 
    .max-width-site-header { 
 
    display: none; 
 
    } 
 
    .site-header-992px { 
 
    display: block; 
 
    overflow: hidden; 
 
    border-bottom: 1px solid grey; 
 
    height: 52px; 
 
    padding: 10px 10px; 
 
    background: url(../img/header-back.gif) repeat-x left bottom; 
 
    } 
 
    .site-header-992px .hamburger-icon { 
 
    float: left; 
 
    padding-left: 10px; 
 
    cursor: pointer; 
 
    } 
 
    .site-header-992px .hamburger-icon img { 
 
    width: 32px; 
 
    height: 32px; 
 
    padding-right: 4px; 
 
    border-right: 1px solid black; 
 
    } 
 
    .site-header-992px .logo-for-992px { 
 
    position: absolute; 
 
    left: 100px; 
 
    right: 100px; 
 
    } 
 
    .site-header-992px .logo-for-992px img { 
 
    margin: 0 auto; 
 
    display: block; 
 
    height: 32px; 
 
    } 
 
    .site-header-992px .right-side-menu { 
 
    float: right; 
 
    margin: 5px 0; 
 
    padding-right: 10px; 
 
    cursor: pointer; 
 
    } 
 
    .site-header-992px .right-side-menu-collapsed { 
 
    position: absolute; 
 
    top: 45px; 
 
    right: 0px; 
 
    background-color: white; 
 
    z-index: 999; 
 
    border-radius: 10px; 
 
    box-shadow: -2px 2px 10px grey; 
 
    display: none; 
 
    } 
 
    .site-header-992px .right-side-menu-collapsed ul { 
 
    list-style-type: none; 
 
    margin: 10px; 
 
    } 
 
    .left-navigation-collapsed { 
 
    position: fixed; 
 
    z-index: 999; 
 
    list-style: none; 
 
    background: #111; 
 
    width: 250px; 
 
    height: 100%; 
 
    left:-100%; 
 
    transition: all .5s; 
 
    overflow: auto; 
 
    } 
 
    .left-navigation-collapsed ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 5px 0; 
 
    padding-left: 10px; 
 
    } 
 
    .left-navigation-collapsed ul li.main-li { 
 
    padding: 15px 0; 
 
    border-bottom: 1px solid #1B1B1B; 
 
    color: white; 
 
    font-size: 16px; 
 
    cursor: pointer; 
 
    
 
    } 
 
    .left-navigation-collapsed ul li.main-li div { 
 
    color: white; 
 
    } 
 
    .left-navigation-collapsed ul a { 
 
    color: #C7C7C7; 
 
    font-size: 16px; 
 
    text-decoration: none; 
 
    padding-left: 10px; 
 
    } 
 
    .left-navigation-toggle { 
 
    left: 0; 
 
    } 
 
    .my-container-toggle { 
 
    left: 250px; 
 
    transition: all .5s; 
 
    } 
 
} 
 

 
.list-inside-list-left { 
 
    display: none; 
 
} 
 

 
.list-inside-list-left li { 
 
    padding: 5px 0; 
 
    padding-left: 0px; 
 
} 
 

 
.list-inside-list-left li a { 
 
    font-size: 12px; 
 
} 
 

 
.list-inside-list-left li a:hover { 
 
    color: grey; 
 
} 
 

 
.list-visible { 
 
    display: block; 
 
} 
 

 

 
/*# sourceMappingURL=custom-styles.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="left-navigation-collapsed"> 
 
    <ul class="my-left-menu"> 
 
    <li class="main-li"> 
 
     <div class="list-toggler-1"><span>&#9658;</span> 
 
     <!-- <a href="about.php"> -->About Us</div> 
 
     <ul class="list-inside-list-left firstlist"> 
 
     <li><a href="CMAFounderIntroduction.php">CMA Founder</a></li> 
 
     <li><a href="vision.php">Vision &amp; Mission</a></li> 
 
     <li><a href="CEOMessage.php">CEO's Message</a></li> 
 
     <li><a href="OurMilestones.php">Our Milestones</a></li> 
 
     <li><a href="MasterTrainers.php">Master Trainers</a></li> 
 
     <li><a href="OurCenters.php">Our Centres</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="main-li"> 
 
     <div class="list-toggler-2"><span>&#9658;</span> 
 
     <!-- <a href="CMAMethodology.php"> -->CMA Methodology</div> 
 
     <ul class="list-inside-list-left secondlist"> 
 
     <li><a href="CMAMethodology.php">Introduction</a></li> 
 
     <li><a href="HowTheBrainWorks.php">How The Brain Works</a></li> 
 
     <li><a href="HowCMAWorks.php">How CMA Works</a></li> 
 
     <li><a href="AbacusTraining.php">Abacus Training &amp; Brain Development</a></li> 
 
     <li><a href="benefitOfCMA.php">Benefits of CMA Methodology</a></li> 
 
     <li><a href="BestTimeToLearn.php">Best Time to Learn</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="main-li"> 
 
     <div class="list-toggler-3"><span>&#9658;</span> 
 
     <!-- <a href="CMAProgramme.php"> -->CMA Programme</div> 
 
     <ul class="list-inside-list-left thirdlist"> 
 
     <li><a href="CMAProgramme.php">CMA Programme</a></li> 
 
     <li><a href="WhyCMA.php">Why CMA</a></li> 
 
     <li><a href="GettingStarted.php">Getting Started</a></li> 
 
     <li><a href="EnquiryForm.php">Course Enquiry</a></li> 
 
     <li><a href="FAQ.php">FAQ</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="main-li"> 
 
     <div class="list-toggler-4"><span>&#9658;</span> 
 
     <!-- <a href="TechersTraining.php"> -->Teacher's Training</div> 
 
     <ul class="list-inside-list-left fourthlist"> 
 
     <li><a href="TechersTraining.php">Overview</a></li> 
 
     <li><a href="TeacherTestimonial.php">Graduate Teachers Testimonies</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="main-li"> 
 
     <div class="list-toggler-5"><span>&#9658;</span> 
 
     <!-- <a href="ourStarStudents.php"> -->Badges of Excellence</div> 
 
     <ul class="list-inside-list-left fifthlist"> 
 
     <li><a href="ourStarStudents.php">Our Star Students</a></li> 
 
     <li><a href="danLevelStudent.php">Dan Level Honour Roll</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="main-li"> 
 
     <div class="list-toggler-6"><span>&#9658;</span> 
 
     <!-- <a href="ourStarStudents.php"> -->Testimonials 
 
     </div> 
 
     <ul class="list-inside-list-left sixthlist"> 
 
     <li><a href="ParentTestimonials.php">Parents Testimonials</a></li> 
 
     <li><a href="StudentTestimonial.php">Students Testimonials</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="main-li"> 
 
     <div class="list-toggler-7"><span>&#9658;</span> 
 
     <!-- <a href="FranchiseOpportunity.php"> -->Franchise Opportunity</div> 
 
     <ul class="list-inside-list-left seventhlist"> 
 
     <li><a href="FranchiseOpportunity.php">About Us Franchise</a></li> 
 
     <li><a href="FranchiseEligibility.php">Franchisee Eligibility</a></li> 
 
     <li><a href="FranchiseGettingStarted.php">Getting Started</a></li> 
 
     <li><a href="FranchiseEnquiry.php">Franchisee Enquiry</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav> 
 
<!-- Start Site Header 992px --> 
 
<div class="my-container"> 
 
    <header class="site-header-992px"> 
 
    <div class="hamburger-icon"> 
 
     <img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png"> 
 
    </div> 
 
    <div class="logo-for-992px"> 
 
     <a href="index.php"><img src="img/logo.png" alt="Site Logo"></a> 
 
    </div> 
 
    <div class="right-side-menu"> 
 
     Personal | &#x25BC; 
 
    </div> 
 
    <div class="right-side-menu-collapsed"> 
 
     <ul> 
 
     <li><a href="index.php" style="font-family: Arial;">Home</a></li> 
 
     <li><a href="MediaGallery.php" style="font-family: Arial;">Gallery</a></li> 
 
     <li><a href="news.php" style="font-family: Arial;">News &amp; Events</a></li> 
 
     <li><a href="contact.php" style="font-family: Arial;">Contact Us</a></li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 
    <!-- Start Site Header max width-->

Working Fiddle