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>

Jquery 使用按钮翻译多次

Jquery translate multiple times with button

css

jquery

transform

button

translate