用按钮多次翻译Jquery
用按钮多次翻译Jquery
提问于 2015-08-28 16:05:46
如何制作一个触发CSS多次翻译的按钮？
<button>CLICK</button>
// CLICK
$(document).ready(function () {
$('button').click(function (event) {
event.preventDefault();
if (button clicked once) {
$('section').css({'-webkit-transform':'translateY( 100%) '});
} else if (button clicked second time) {
$('section').css({'-webkit-transform':'translateY( 200% )'});
} else if (button clicked second time) {
$('section').css({'-webkit-transform':'translateY( 300% )'});
}
return false;
});
});或者也许还有其他的方法来翻译CSS呢？我知道我可以用.addclass代替.addclass
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-08-28 16:09:04
你可以试试这个：-
var count = 1;
$('button').click(function (event) {
event.preventDefault();
$('section').css({
'-webkit-transform': 'translateY(' + (100 * count) + '%) '
});
count += 1;
});- 第一次单击
button时，count为1，因此translateY对应于100*1=100% - 第二次
count增加1，所以translateY将是100*2=200% - 等等..。
Stack Overflow用户
发布于 2015-08-28 16:10:48
// CLICK
var clickCount = 0;
$('button').click(function(event) {
event.preventDefault();
clickCount -= 1;
if ( clickCount >= -3 ) {
var percentage = clickCount + '00%';
$('section').css({
'-webkit-transform': 'translateY(' + percentage + ') '
});
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button>CLICK</button>
<br/><br/><br/><br/>
<section>Abcd</section>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32275306
复制相关文章
相似问题
腾讯云开发者
