Jquery函数在href点击时滑动div

Question

我有一个占屏幕 400% 的 div。当我单击 href 时，我希望 div 向左滑动。当 So far 时，div 向左移动然后跳回其原始位置。为什么要这样做？

这是我的jquery

<script type="text/javascript">
$(document).ready(function() {

    $('#about').click(function() {
        $('#main_div_wide_wrapper').animate({
        'left' : "-=100%" //moves left
        });
    });

});
</script>

这是Html

<div id="main_div_wrapper">
    <div id="main_div_wide_wrapper">

    </div><!--end main_div_wide_wrapper-->
</div><!--end main_div_wrapper-->
<a class="bottom_link" href="" id="about">About</a>

这是CSS

#main_div_wrapper{
    width:100%;
    height:550px;
    padding:0px;
    margin:0px;
    overflow:hidden;
}

#main_div_wide_wrapper{
    position:relative;
    width:400%;
    height:550px;
    background:#000;
    padding:0px;
    margin:0px;
}

Answer 1

 $('#about').click(function(event) {
     event.preventDefault();
        $('#main_div_wide_wrapper').animate({
        'left' : '-=100%' //moves left
        });
    });

http://jsfiddle.net/ft9sJ/1/

你应该使用 http://api.jquery.com/event.preventdefault/ preventDefault() 方法...我猜是点击链接刷新页面，所以，它导致“跳转”...