Question

当您点击链接时，我有一个滑块可以从另一个滑块移动。

这些链接使用jquery animate函数来更改左css参数。它有效，但经过一些点击后，它会在点击后随机停留。

滑块以宽度为930px且隐藏溢出的div开头，就像蒙版一样。

在这个div里面有另一个div（id幻灯片），有很多宽度（200000px）和位置：relative，这个div包含每个幻灯片（div宽度：930px;浮动：左边的类名是“tratamento”）

在我们拥有菜单的所有内容之外...菜单调用jquery单击函数，使用functiom animate来更改左侧位置滚动幻灯片div中的内容。

这个脚本有效...但是，经过一些点击后，点击随机不会工作几秒钟。不知道为什么，这是代码：

的CSS：

 /* the mask div */
 #corpo2{width:930px;
 margin:80px 25px 20px 25px; 
 overflow:hidden;}

/* this div has every slide inside */
#slide{width:200000px;
position:relative;}

/* class that each slide uses */
.tratamento{
 width:900px;
 padding-right:30px;
 float:left;}

HTML

<div id="corpo2">
<div id="slide">

<div class="tratamento">
 test 1
</div>

<div class="tratamento">
 test 2
</div>

<div class="tratamento">
 test 3
</div>

</div></div>

调用点击功能的菜单：

    <ul>

    <li><a href="#" class="click1">Test 1</a></li>
    <li><a href="#" class="click2">Test 2</a></li>
    <li><a href="#" class="click3">Test 3</a></li>

    </ul>

在jquery中，我在所有内容之后加载它：

    <script>

$(document).ready(function() {
    $( ".click1" ).click(function(){$('#slide').animate({left: '0px'}, 500 );});
    $( ".click2" ).click(function(){$('#slide').animate({left: '-930px'}, 500 );}); 
    $( ".click3" ).click(function(){$('#slide').animate({left: '-1860px'}, 500 );});    


);

    </script>

我尝试了所有内容，我删除了（文档）.ready，在脚本标记中使用和删除了type =“text / javascript”并尝试了bind函数。它仍然停下来工作。

$( ".click1" ).bind("click", function(){$('#slide').animate({left: '0px'}, 500 );});

Answer 1

$(document).ready(function() {
    $( ".click1" ).click(function(){$('#slide').stop().animate({left: '0px'}, 500 );});
    $( ".click2" ).click(function(){$('#slide').stop().animate({left: '-930px'}, 500 );}); 
    $( ".click3" ).click(function(){$('#slide').stop().animate({left: '-1860px'}, 500 );}); 
);

单击后，Jquery点击动画随机卡住

1 个答案: