html - Make a span rotate on click using CSS transform property in JQuery .animate() plugin -

i have menu trigger arrow down right of .when click trigger menu shows want arrow rotate @ 180deg.i tried jquery animation didnt work.here jsfiddle

$('#slide-trigger').on('click', function () {     $('#slide-nav > ul').slidetoggle(400, function () {         $(this).toggleclass('showing');     });     $('#slide-trigger > span').animate({ 'transform' : 'rotatey(180deg)' }); }); 

as far know, basic animates can't animate non-numeric css properties. suggest giving .toggleclass jquery plugin easy use.

update : here numeric value i.e. 180for degree causing issue.

    $('#slide-trigger').on('click', function () {          $('#slide-nav > ul').slidetoggle(400, function () {              $(this).toggleclass('showing');          });          $('#slide-trigger > span').toggleclass('transform-class');      });

#slide-nav {      position: fixed;      display: inline-block;      top: 100px;      left: 0;  }    #slide-nav ul{      padding:0;      display:none;  }    #slide-nav ul li {      position:relative;      width: 100%;      padding: 7px 20px;  }    #slide-nav ul li {      transition: 0.3s;  }    #slide-nav ul .active {      color: rgba(0,0,0,.75);  }    #slide-nav ul .active:before{          content: "";          width: 15px;          height: 1.5px;          background-color: black;          position: absolute;          top: 50%;          left: 0;  }      #slide-trigger {      font-size: 1.4em;      cursor: pointer;      margin: 20px 0;  }  #slide-trigger span {      font-size: 0.8em;  }    .transform-class  {      display:inline-block;      transform:rotatex(180deg) !important;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <nav id="slide-nav">                  <div id="slide-trigger">click here <span>&#9660</span></div>                  <ul>                      <li  class="active"><a href="#">link1</a></li>                      <li><a href="#">link2</a></li>                      <li><a href="#">link3</a></li>                      <li><a href="#">link4</a></li>                  </ul>              </nav>

demo : fiddle.