Question

我有一个延伸400％屏幕的div。当我点击href时，我希望div向左滑动。当到目前为止，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（）方法...我想点击链接刷新页面，这样就会导致'跳'......

Answer 2

我会尝试从它周围删除$（document）.ready（function（），如果你希望它在点击时发生则没有必要。另外我会用margin-left属性而不是简单地离开，当我做了滑块，通常在浏览器中效果更好。

Jquery函数在href点击时滑动div

2 个答案: