我有一些按钮我试图在点击时旋转45度,但是因为我使用了一个变量(或者我认为这就是为什么)当点击一个按钮时它会旋转45度,然后当另一个按钮旋转时被点击是因为变量已经增加了45度它变为90.有没有办法做这个w / out变量或修改设置我有所以这不会发生?
以下是演示中的代码和设置:http://jsbin.com/atinap/16/edit
$(".info_btn").css("-webkit-transition", "-webkit-transform 0.25s ease-in-out");
var info_btn_DEG = 0;
$(".info_btn").toggle(function() {
$(this).closest('.article_wrapper').find('.description').slideDown("250");
info_btn_DEG += 45;
$(this).css("-webkit-transform", "rotateZ(" + info_btn_DEG + "deg)");
$(this).fadeTo("200", 0.65);
}, function() {
$(this).closest('.article_wrapper').find('.description').slideUp("200");
info_btn_DEG += 45;
$(this).css("-webkit-transform", "rotateZ(" + info_btn_DEG + "deg)");
$(this).fadeTo("250", 0.3);
});
任何对此的帮助都会非常感谢
答案 0 :(得分:6)
您需要将角度与每个元素相关联,而不是所有元素都有一个全局角度 - 使用.data()
:
function increaseAngle(elem) {
var oldAngle = $(elem).data('angle');
var newAngle = oldAngle + 45;
$(elem)
.css("-webkit-transform", "rotateZ(" + newAngle + "deg)")
.data('angle', newAngle);
}
$(".info_btn")
.css("-webkit-transition", "-webkit-transform 0.25s ease-in-out")
.data('angle', 0);
.toggle(function() {
$(this).closest('.article_wrapper').find('.description').slideDown(250);
increaseAngle(this);
$(this).fadeTo(200, 0.65);
}, function() {
$(this).closest('.article_wrapper').find('.description').slideUp(200);
increaseAngle(this);
$(this).fadeTo(250, 0.3);
});