Updated JSFiddle

Question

我有一个div当你点击它打开内部的内容，在栏的顶部我有一个箭头图像，如果内容被关闭（默认位置），箭头指向右边，当内容是开放的我希望箭头图像旋转指向下方。

我正在使用jQueryRotate来旋转图像并且我已经将所有元素都工作了，但是当切换时我无法让它工作，我只能在打开内容时让图像旋转一次，我有我在哪里必须到这里

$("#ProductHeaderWrap1").click(function () {
    $("#ProductDetailsToggle1").stop().slideToggle("slow");
});


$("#ProductHeaderWrap1").click(function () {
    $("#ProductHeaderWrap1").find(".arrow").rotate({
        animateTo: 90
    }, {
        duration: 500
    });
});

http://jsfiddle.net/cgF4a/以及一些关于jQuery尝试的工作，我只需要在点击关闭div时将图像旋转为0。

感谢您的帮助，学家

Answer 1

使用CSS更容易做到这一点，看看：

img.open {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    transform:rotate(90deg);
    -webkit-transition: -webkit-transform 1s linear; 
     -moz-transition: -moz-transform 1s linear;
       -o-transition: -o-transform 1s linear;
          transition: transform 1s linear;
}
img {
    -webkit-transition: -webkit-transform 1s linear;
     -moz-transition: -moz-transform 1s linear;
       -o-transition: -o-transform 1s linear;
          transition: transform 1s linear;
}

$(document).ready(function () {
    $("#ProductHeaderWrap1").click(function () {
        $("#ProductDetailsToggle1").stop().slideToggle("slow");
        $(this).find("#Image1").toggleClass("open");
    });
});

jQuery使用slideToggle旋转

1 个答案:

Updated JSFiddle