jQuery Slidetoggle Rotate 45deg and back

Question

Я пытаюсь заставить элемент вращаться на 45º при щелчке, должен открываться элемент переключения. Если вы нажмете на него снова, я хочу, чтобы он вращался назад, и элемент переключения должен был закрыться.

Я пробовал много кодов, я хотел бы сохранить его максимально простым.

Plugin I am using

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; 
} 

Что я делаю неправильно? Есть ли более простой способ (меньше кода)?

Answer 1

Действительно 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> 

Answer 2

Не зная ваших требований, трудно дать вам полный ответ. Хотя это может быть выполнено с помощью функции поворота и перехода css3.

transform: rotate(45deg); 

Я создал jsfiddle, демонстрируя это. http://jsfiddle.net/hGZbW/

EDIT: Если кто-то пытается выполнить это без CSS, есть плагин jquery, который поддерживает большинство основных браузеров. Для достижения этого эффекта для IE вам понадобится использовать матричный фильтр.

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