Question

我正在开展一个学校项目，我需要你的帮助。我所做的是通过一组div进行无限循环。有3个div和3个链接。当我点击这些链接时，应立即显示正确的div（并在此之后显示所有div并再次循环）。问题是当我点击有延迟时，我不想要...... 当我点击链接时，div是否可能立即被冻结？还有其他更容易/更简单的方法吗？你能否改变/添加我需要的代码？提前谢谢。

<ul id="cyclelist">
  <li><div>Div 1</div></li>
  <li><div>Div 2</div></li>
  <li><div>Div 3</div></li>
</ul>
</br></br>
<a href="#" class="className1">link1</a><br/>
<a href="#" class="className2">link2</a><br/>
<a href="#" class="className3">link3</a><br/>


var j=0;
function changeOnClick()
{

$("a").click(function(e) {
    e.preventDefault();
    if ($(this).hasClass('className1')) {
        j=-1;
    }
    else if ($(this).hasClass('className2')) {
        j=0;
    }
    else if ($(this).hasClass('className3')) {
        j=1;
    }
});
}

 var delay = 2000;
 function cycle(){
        var jmax = $("ul#cyclelist li").length -1;
        changeOnClick();
         $("ul#cyclelist li:eq(" + j + ")")
                 .animate({"opacity" : "1"} ,400)
                 .animate({"opacity" : "1"}, delay)
                 .animate({"opacity" : "0"}, 400, function(){
                         (j == jmax) ? j=0 : j++;
                         cycle();
                 });
         };
 cycle();

Answer 1

.animate({"opacity" : "1"} ,400)

动画的第二个参数代表速度，这就是为什么你得到延迟删除

这是.animate

的语法

$(selector).animate({params},speed,callback);

一旦完成.. http://www.w3schools.com/jquery/jquery_animate.asp

修改 - 所以对于你的评论..我不知道天气是正确的方式..更好地使用setTimeout（）;

来调用cycle（）
setTimeout(cycle,2000);

Answer 2

尝试从事件处理程序调用循环函数。像这样的东西

if ($(this).hasClass('className1')) {
    j=-1;
    cycle();
}

这可以解决您的问题。

立即在div组之间显示正确的div并再次循环

2 个答案: