問題描述
jquery切換幻燈片和切換旋轉動畫 (jquery toggle slide and toggle rotation animate)
I have a button when it get's pressed I'd like it to animate a paragraph open and rotate the button 45 degrees, and then when you click it again, close the paragraph and animate forward 45 more degrees. I'm using the toggle slide to open and close the paragraph and it works fine. I'm not really sure how to add the rotation animation into the function though. Ideally if it's possible I'd like to have the rotation using just jquery and no css transforms. BUT if this isn't possible using css in the jquery is fine but I just want it to be all one function. Right now this is what I have, and thanks in advance for helping me out with this:
<script type="text/javascript">
$("#effects_of_yoga_info").click(function () {
$("p#effects_of_yoga_text").slideToggle("fast");
});
</script>
effects_of_yoga_info is what I'd like to rotate here
參考解法
方法 1:
Try this. I put this together and tested.
$(document).ready(function() {
$('#effects_of_yoga_info').click(function() {
var info = $(this);
var rotation = parseInt(info.data('rotation'));
$('p#effects_of_yoga_text').animate({
height: 'toggle'
},{
step: function(now, fx) {
var t = fx.start == 100 ? 100 - fx.now : fx.now;
info.css('transform', 'rotate('+ (rotation + ((t / 100) * 45)) +'deg)');
},
complete: function() {
info.data('rotation', rotation + 45);
},
duration: 'fast'
});
}).data('rotation', 0);
});
(by loriensleafs、Austin Brunkhorst)