728x90 전체 글36 [애니메이션 정지] .clearQueue() .stop() .delay() $('div').click(function(){ $('div').click(function(){ $(this).clearQueue(); // 더블 클릭 등으로 대기열에 들어가는 animate를 막아줌 // 계속된 실행이 일어나지 않도록 하는 메서드. // 클릭되어 실행된 경우에는 animate 실행 대기를 일으키지 않도록 막아준다. $(this).animate({ left: '+=60' }, 2000).animate({ width: '+=60' }, 2000).animate({ height: '+=60' }, 2000); // 한꺼번에 실행되는 것이 아니라 // 차례차레 순서대로 실행된다 }); }); $('div').click(function(){ $('div').click(function(){ $(t.. 2021. 5. 14. [이벤트] .animate() : 사용자 정의 효과 $('div').click(function(){ $(this).animate({ width: 300 // 세미콜론 사용 X }); }); $('div').click(function(){ $(this).animate({ width: "+=100", height : "+=100" // 클릭할 때마다 클릭할 당시의 값에서 상대적으로 100px을 더하여 줌 }, 1500); // duration: 1.5초 }); 2021. 5. 13. [이벤트] .hover() = mouseenter & mouseleave black $('a').on({ mouseenter : function () { $(this).addClass('reverse'); }, mouseleave : function () { $(this).removeClass('reverse'); } }); $(function(){ $('a').hover(function(){ // mouseenter 기능 $(this).addClass('bgc').html('yellow'); }, function(){ // mouseleave 기능 $(this).removeClass('bgc').html('black'); }); }); 2021. 5. 13. [이벤트] 변수에 함수 지정하여 사용 Bright Clever Wit Awesome Brilliant // 변수에 함수 담아 사용 var handler = function () { $('') .html('Fortune') .appendTo('h2') .click(handler) }; $('h2').on('click', handler); // 자주 사용되는 것을 위와 같이 // 따로 따로 관리하면 복잡하므로 // body에 이벤트를 연결하는 방식도 있다 $('body').on('click','h2', function(){ // body 태그를 클릭했을 때, 클릭한 것이 h2 태그라면, // 아래 이벤트 핸들러를 실행한다. $(this).css({'background-color':'orange', 'border':'green 5px dotted.. 2021. 5. 12. 이전 1 2 3 4 5 6 ··· 9 다음 728x90
