jquery 질문드립니다.
본문
$(".menu").on("mouseenter", function() {
$(this)
.animate({width: "9%"},700);
});
.menu에 오버시 해당 menu 가로 크기를 9%로 합니다.
.menu 개수가 많아도 정상작동 됩니다.
그런데 이거를
function test() {
$(this)
.animate({width: "9%"},700);
});
};
이렇게 변경하고
$(".menu").on("mouseenter", function() {
test();
});
이렇게 하니 this일 때는 아예 동작을 안하고, this를 .menu로 바꾸니까 모든 menu가 동시에 동작합니다.
당연한 결과이긴한데;;;
마지막 코드처럼 test(); 로 불러오려면 어떻게 해야할까요
답변 3
아래처럼 해보세요..
실행은 여기서 해보세요.
http://dev.e-naver.com/content/test.php
<script>
$(document).ready(function(){
$(".menu").on("mouseenter", function() {
test($(this));
});
});
function test(obj) {
$(obj).animate({width: "9%"},700);
}
</script>
<input type="button" class="menu" value="aaa">
<input type="button"class="menu" value="ppp">
<input type="button" class="menu" value="[[[[">
<input type="button" class="menu" value="rrr">
태그도 보여줘야줭
css로 충분히 가능한 부분인데 굳이 jquery를 사용하셔야하나요?
.menu { width:0; transition:all 0.7s ease-in-out; }
.menu:hover { width:9%; }
답변을 작성하시기 전에 로그인 해주세요.