jQuery离开了动画片

Question

我有这个结构：

HTML：

<div id="side-menu">
  <ul>
    <li><img src="img/once_sonra.png" alt="img1"></li>
    <li><img src="img/online_destek.png"alt="img2"></li>
    <li><img src="img/sizi_arayalim.png"alt="img3"></li>
  </ul>
</div>​

CSS：

#side-menu {
    display:block;
    z-index:20;
    position:fixed;
    right:0;
    top:76px;
}​

JS：

$(document).ready(function() {
    $("#side-menu").hide();
    //$(document).click(function() {
        $("#side-menu").slideDown().delay(500).slideUp();
    //});
});

一切正常。但是我不想要幻灯片效果，想要留下动画。

我该怎么做？

Answer 1

您可以使用 .animate（）。例如：

$('#myElement').animate({left:'+=30px'});

了解更多信息：

http://api.jquery.com/animate/

Answer 2

使用.animate

DEMO

<强> DEMO with Toggle left

$("#side-menu").animate({"left": "-=50px"}, "slow")

or

var $lefty = $('#side-menu');
$lefty.animate({
  left: parseInt($lefty.css('left'),10) == 0 ?
    -$lefty.outerWidth() :
    0
});