Jquery 使用按钮多次翻译

Question

如何制作一个多次触发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 翻译？ P.S 我知道我可以用 .addclass 替换 .css

Answer 1

你可以试试这个:-

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%
• 等等...