javascript - JQuery 过渡切换类不起作用

Question

我也尝试过将 css 转换添加到切换类，但它们也不起作用。没有任何反应。

请看这个 fiddle :
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