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

＆＃13;

// 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 + ') '
    });
  }
});

＆＃13;

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

＆＃13;

Jquery使用按钮多次翻译

2 个答案: