제이쿼리 질문인데요! 마지막으로 선택했던 부분 남겨놓는 방법..?
본문
페이지
http://futuremain.com/3-1n.php
<script type="text/javascript">
$(function(){
var $fl = $("#flip_cover > li");
$("#flip_cover > li").on({
mouseenter:function(){
var i = $(this).index();
$(".flip p.last").eq(i).animate({
top : 115
}, "swing");
$(".flip p:first-child").eq(i).animate({
opacity: 0.5,
top : -500
}, 200)
if($fl){
$fl.eq(i).stop().animate({
width : 457
}, "swing")
}
},
mouseleave:function(){
$fl.stop().animate({
width : 213
});
$(".flip p:first-child").stop().animate({
opacity: 1,
top : 115
}, "swing")
$(".flip p.last").stop().animate({
top : 676
})
}
})
//마우스 이벤트
})
</script>
조잡하지만.. 만들었는데...
구현하려는 건 http://www.ge.com/digital/industries/automotive 이거구요
여기서는 마지막에 선택했던 게 남아있던데
아무리 생각해봐도 어떻게 남는지 잘 안되서요
도움부탁드려요
답변 1
<script type="text/javascript">
$(function(){
var $fp = null; // 이전의 index값을 임시로 저장하기 위한 변수
var $fl = $("#flip_cover > li");
$("#flip_cover > li").on({
mouseenter:function(){
var i = $(this).index();
$(".flip p.last").eq(i).stop().animate({
top : 115
}, "swing");
$(".flip p:first-child").eq(i).stop().animate({
opacity: 0.5,
top : -500
}, 200)
if($fl){
$fl.eq(i).stop().animate({
width : 457
}, "swing")
}
// 이전에 선택한 값($fp)가 있다면 이전에 선택한 index를 닫음.
if($fp != null){
$fl.eq($fp).stop().animate({
width : 213
});
$(".flip p:first-child").eq($fp).stop().animate({
opacity: 1,
top : 115
}, "swing")
$(".flip p.last").eq($fp).stop().animate({
top : 676
})
}//end if
// 선택한 index를 임시 저장
$fp = i;
}
})
//마우스 이벤트
})
</script>
마지막이 계속 남으려면 mouseleave(마우스가 요소를 벗어날때)를 지우면 될것이고, 지우고 나면 이전 선택한 요소가 그대로 남아 문제가 되니 이전에 선택한 요소가 mouseleave에서 작성한 기능을 해야하므로 이전에 선택한 요소를 기억했다가 mouseleave에 작성한 코드를 그대로 적용시키면 됩니다.
mouseenter이벤트의 .stop()은 마우스를 미친듯이 움직였을때 animate가 미친듯이 날뛰어 추가했습니다.
감사합니당~~
답변을 작성하시기 전에 로그인 해주세요.