jQuery Slidetoggle旋转45度并返回

我试图使元素旋转45º的点击动作，切换元素应该打开。如果再次单击它，我希望它回转并且切换元素应该关闭。jQuery Slidetoggle旋转45度并返回

我已经尝试了很多代码，我想保持它尽可能简单。

的jQuery：

$(".category-desc-toggle").click(function() { 
    $('.category-desc').slideToggle(300); 
    $(".category-desc-toggle").toggleClass("rotate45"); 
});

的CSS：

.rotate45 { 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 
.category-desc-toggle { 
    -moz-transition: all .3s; 
    -webkit-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 
}

我在做什么错？有更简单的方法吗（更少的代码）？

来源

2013-03-10 Livog

事实上JuanT是正确的，CSS3可以完成改造，见Firefox MDN Link获取更多信息。

的jsfiddle：http://jsfiddle.net/7K6GP/4/

<div class="description-wrapper"> 
    <div class="category-desc-toggle rotate"></div> 
    <div class="category-desc">Just Some Description</div> 
</div> 

<script> 
    $(".description-wrapper").click(function() { 
     $(this).children('div.category-desc').slideToggle(300); 
     $(this).children('div.category-desc-toggle').toggleClass("rotate45"); 
    }); 
</script>

来源

2013-03-10 15:56:17 MackieeE

我该如何使用这个插件http://ricostacruz.com/jquery.transit/ – Livog 2013-03-10 16:08:15

为什么你需要使用该插件，如果CSS转换达到相同的目的？ – MackieeE 2013-03-10 16:14:34

@Frank我已经编辑了我的答案给你和一个新的小提琴，希望这就是你之后 – MackieeE 2013-03-10 16:25:27

不知道你的要求，它很难给你一个完整的答案。虽然，这可以通过css3的旋转和转换属性来完成。

transform: rotate(45deg);

我已经创建了一个jsfiddle来演示这个。 http://jsfiddle.net/hGZbW/

编辑：如果有人试图在没有CSS的情况下完成这项工作，有一个支持大多数主流浏览器的jquery插件。为了实现这种对IE的影响，你需要使用矩阵过滤器。

https://github.com/heygrady/transform/wiki

来源

2013-03-10 15:40:00 JuanT

感谢的人，我得到了它的工作，但反正是有没有的style.css期运用CSS，所以我们将其添加了jQuery运行在那里。我在编辑 – Livog 2013-03-10 16:03:23

Frank中添加了Css，作为一个FYI，我添加了一个可以完成这个循环的jquery插件。 – JuanT 2013-03-10 22:37:54

jQuery Slidetoggle旋转45度并返回

回答

相关问题