jquery - jQuery中具有2种不同功能的不同样式的动画

我正在制作元素的动画，但遇到了一些有趣的麻烦。当我使用.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>

最佳答案

使用.toggleClass()

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