Javascript JQuery div旋转

到目前为止，我已经成功地使用以下代码旋转了一个div：

function AnimateRotate(d){
    var elem = $("#arrow");

    $({deg: 0}).animate({deg: d}, {
        duration: 200,
        step: function(now){
            elem.css({
                transform: "rotate(" + now + "deg)"
            });
        }
    });
}

我现在面临的问题是试图回到相反的方向。旋转

div

后，我再次单击div，然后它只需再次循环代码，并在与之前相同的位置结束。但我想要的是它做同样的事情，但方向相反

为了弄清楚我在说什么，我贴了一个

在图像中演示：

---

或者类似的东西。检查滑下连接器是否可见，并使用不同参数调用函数

$( ".panel-heading" ).click(function() {
  var isVisible = $("#recipe-container").css("display");
if (isVisible == "block") {
    AnimateRotate(0, 90);
}  
else { 
AnimateRotate(90, 0);
}
$("#recipe-container").slideToggle();
});

function AnimateRotate(d,g){
var elem = $("#arrow");

$({deg: g}).animate({deg: d}, {
    duration: 200,
    step: function(now){
        elem.css({
            transform: "rotate(" + now + "deg)"
        });
    }
});
}

---

JsFiddle:

我采用了一种更为独立的方法，使用CSS来控制动画，而不是jQuery

通过给主容器一个“container--open”类，您可以在子元素上设置样式

.container--open #recipe-container {
    opacity: 1;

    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
            transform: translateY(0);
}

.container--open #arrow {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
            transform: rotate(90deg);
}

这会将jQuery代码修剪为：

var container = $('#container'),
    trigger   = $('.panel-heading');

trigger.on('click', function() {
    container.toggleClass('container--open');
});

---

在这里拨弄：

您为什么不使用CSS3动画？它可以像切换一个类一样简单。您已经在使用CSS3进行旋转，那么为什么不使用转换呢？如果您仍然想使用javascript->@adeneo，我有一个类似的想法：P和CSS3->