不同风格的动画，在jquery中有2个不同的功能

Question

我正在制作一个元素的动画，我遇到了一些有趣的麻烦。当我使用.css（）方法时，一切都按照需要工作，但是当我使用.toggle（）时，它应该是一种错误的方式。也许我在css中缺乏一些知识但是如何通过切换类来使我的代码更清晰。您可以在代码段中找到两种类型的动画

$(document).ready(function(){

    $('.list-header').on('click',function(){
      $(this).children().last().css({'width':'0%','padding-right':'0px'});
    })

    /*
    $('.list-header').on('click',function(){
      $(this).children().last().toggle('hide-span');
    })
   */
    
})

  body .list-wrapper {
    margin-top: -16px;
    background: #271726;
    color: white;
    text-align: center;
    text-align: -moz-center;
    text-align: -webkit-center;
    padding: 20px 0px 150px 0px; }
    body .list-wrapper .hide-span {
      width: 0% !important;
      padding-right: 0px !important;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease; }
    body .list-wrapper ul a {
      padding: 15px; }
    body .list-wrapper ul li {
      padding: 15px;
      list-style: none;
      width: 70%;
      position: relative; }
      body .list-wrapper ul li span {
        padding-right: 20px; }
      body .list-wrapper ul li .line {
        position: absolute;
        height: 3px;
        top: 50px;
        left: 0;
        right: 0;
        width: 22%;
        z-index: 1;
        margin: 0 auto;
        background-color: white;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease; }
    body .list-wrapper ul li:last-child {
      background: #201320;
      display: none;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease; }
    body .list-wrapper ul li:first-child {
      cursor: pointer;
      padding-bottom: 30px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-wrapper">
      <ul>
        <li class="list-header"><span>x</span>toggle<span class="line"></span></li>
        <li>some2</li>
      </ul>
      <ul>
        <li class="list-header"><span>x</span>toggle<span class="line"></span></li>
        <li>some2</li>
      </ul>
      <ul>
        <li class="list-header"><span>x</span>toggle<span class="line"></span></li>
        <li>some2</li>
      </ul>
      <ul>
        <li class="list-header"><span>x</span>toggle<span class="line"></span></li>
        <li>some2</li>
      </ul>
      <ul>
        <li class="list-header"><span>x</span>toggle<span class="line"></span></li>
        <li>some2</li>
      </ul>
      <ul>
        <li class="list-header"><span>x</span>toggle<span class="line"></span></li>
        <li>some2</li>
      </ul>
      <ul>
        <li class="list-header"><span>x</span>toggle<span class="line"></span></li>
        <li>some2</li>
      </ul>
    </div>

Answer 1

添加此课程：

.hiddenSpan {
   width: 0%; 
   padding-right: 0px; 
}

编辑你的代码：

$(document).ready(function(){

  $('.list-header').on('click',function(){
    $(this).children().last().toggleClass('hiddenSpan');
  })

})

Answer 2

使用.toggleClass()

$(this).children().last().toggleClass('hide-span');