[애니메이션 효과로 그림을 매끄럽게 변경해 보자] 인데여..

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
sample2
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
body{
background:black;
}
#container{
width:1000px;
margin:20px auto;
}
#navi{
width:300px;
float:left;
}
#navi li{
list-style-type:none;
width:150px;
float:left;
}
#navi li img{
border:3px solid white;
}
#main{
width:650px;
float:right;
}
#main img{
position:absolute;
border:3px solid white;
}
</style>
<script type="text/javascript">
$(function(){
$("#navi a").click(function(){

$("#main img").before("");
$("#main img:last").fadeOut("fast",function(){

$(this).remove();
});
return false;
});
});
</script>

<body>






</body>
</html>


화면단에 나오는걸 클릭하면 우측의 그림이 변경이 안되고 아예 다른 화면으로 전환되어 버리거든여..
이거 소스상 문제가 있는거 같은데여.. 한번 살펴봐 주셔야 되겠습니다.
이 게시물을