jquery 질문드립니다. 채택완료
</p>
<p>$(".menu").on("mouseenter", function() { </p>
<p>$(this)</p>
<p> .animate({width: "9%"},700);</p>
<p>});</p>
<p>
.menu에 오버시 해당 menu 가로 크기를 9%로 합니다.
.menu 개수가 많아도 정상작동 됩니다.
그런데 이거를
</p>
<p>function test() {</p>
<p>$(this)</p>
<p> .animate({width: "9%"},700);</p>
<p>});</p>
<p>};</p>
<p>
이렇게 변경하고
</p>
<p>$(".menu").on("mouseenter", function() { </p>
<p>test();</p>
<p>});</p>
<p>
이렇게 하니 this일 때는 아예 동작을 안하고, this를 .menu로 바꾸니까 모든 menu가 동시에 동작합니다.
당연한 결과이긴한데;;;
마지막 코드처럼 test(); 로 불러오려면 어떻게 해야할까요
답변 3개
아래처럼 해보세요..
실행은 여기서 해보세요.
http://dev.e-naver.com/content/test.php">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%; }
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인