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翻譯？ PS我知道我可以代替的.css .addclass

Answer 1

你可以試試這個： -

var count = 1; 
$('button').click(function (event) { 
    event.preventDefault(); 
    $('section').css({ 
     '-webkit-transform': 'translateY(' + (100 * count) + '%) ' 
    }); 
    count += 1; 
}); 

• 第一次button點擊count是1，所以平移Y將對應於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>