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

Answer 2

// 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>