1. Add Class addclass도 animate하자!
<div class="toggler">
<div id="effect" class="ui-corner-all">
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
</div>
</div>
이런 구조의 html에, css에서
<style>
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; padding: 1em; border: 1px solid #000; background: #eee; color: #333; }
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 120px; padding: 30px; margin: 10px; font-size: 1.1em; }
</style>
이렇게 먼저 class를 정의해 준다. 그다음.
<script>
$( function() {
$( "#button" ).on( "click", function() {
$( "#effect" ).addClass( "newClass", 1000, callback );
});
function callback() {
setTimeout(function() {
$( "#effect" ).removeClass( "newClass" );
}, 1500 );
}
} );
</script>
이렇게 해주면 되는데, 이렇게 callback함수 오는걸 따로 빼놓을 수도 있다. 여기서 callback을 쓰지 않으면 addClass만 animate되고 멈추겠지! 대박이다 진쨔
2. Hide와 Show도 이펙트 있게
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Hide</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
css는 알아서 주고,
$( "#effect" ).hide( selectedEffect, options, 1000, callback );
};
저 sellectedEffect부분에는 blind, bounce등 여러가지 쓸수 있고, slide나 Fade가 가장 괜찮은거 같다. option부분은 scale이나 size가 아니면 쓰지 않아도 ok.
728x90
'퍼블리싱 > HTML | CSS | Javascript' 카테고리의 다른 글
글자 아이콘, fontawsome (0) | 2017.04.04 |
---|---|
background animate (0) | 2017.04.04 |
jquery-ui 1 (0) | 2017.04.02 |
click이벤트에 여러 효과 동시에 주기 :p 초간단! (0) | 2017.04.02 |
select box를 제이쿼리로 외형제어 (0) | 2017.04.02 |