퍼블리싱/JS & JQ

.is(':animated') 활용 중복동작 방지

Slyeee 2019. 1. 15. 16:43

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="btn">
    <span style="border: 1px solid #000">클릭하세요!</span>
    <div class="hideMenu" style="display: none">
        <ul>
            <li>숨겨진 메뉴1
            <li>숨겨진 메뉴2
        </ul>
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<div class="btn">
    <span style="border: 1px solid #000">클릭하세요!</span>
    <div class="hideMenu" style="display: none">
        <ul>
            <li>숨겨진 메뉴1
            <li>숨겨진 메뉴2
        </ul>
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
 
<script>
    $('.btn').bind({
        // 일반적 멀티 바인드
        mouseenter: function() {
            $('.hideMenu').slideDown();
        },
        mouseleave: function() {
            $('.hideMenu').slideUp();
        }
 
        // .is(':animated') 사용
        mouseenter: function() {
            var $btn=$('.hideMenu');
            if(!$btn.is(':animated')) $btn.slideDown();
        },
        mouseleave: function() {
            $('.hideMenu').slideUp();
        }
});
</script>
cs