2011-12-28 126 views
1

我有一个jQuery循环脚本(我写道,所以它不是高质量),基本上循环<li>元素的动画不透明度。例如,假设我有三个<li>元素。该脚本会将所有元素的不透明度设置为0,但将第一个元素设置为0,然后单击“下一个”按钮时,会将第一个元素的不透明度设置为0,然后将第二个元素的不透明度设置为1,等等。与此同时,我有一个setInterval运行,字面上点击“下一步”按钮每四秒。CSS不透明问题

问题是,如果用户在setInterval推动它的同时单击“下一步”按钮,元素的不透明度会混淆,并且某些元素会彼此重叠。

任何人都可以提出解决方案吗?如果我使用.hide()功能而不是.css('opacity'),它会更好吗?

EDIT:这是代码

$('ul#news > li').css({opacity:0.0}).filter('ul#news li.firstNews').css({opacity:1.0}); 
$('#newsLeft').click(function() { 

    var $active = $('ul#news li.active'); 
    var $next = $active.next().length ? $active.next() : $('ul#news li.firstNews'); 

     $active.animate({opacity:0.0}, 300, function() { 
      //when done animating out, animate next in 
      $next.css({opacity:0.0}) 
       .animate({opacity: 1.0}, 400, function() { 
       $active.removeClass('active'); 
       $next.addClass('active'); 
     }); 
    }); 

    return false; 
}); //clickRight 
+0

你可以上传你的代码或jsfiddle吗? – Sang

+1

那么为什么你不使用其中一个bajillion预先存在的高质量的jQuery脚本来做同样的事情呢? –

+0

@MДΓΓБДLL:你说得对,我的决定很差。我很固执,想在大约1.5年前尝试自己编码。自那时起,我不再浪费时间编写简单的循环脚本,因为有许多高质量的脚本公开可用。 – Amit

回答

1

复位定时器动画时,下一个按钮悬停。下面的例子。

var animTimerDelay = 4000, 
    animTimerID = null; 

function animTick() { 
    // Animation code here 

    resetTimer(); 
} 

function resetTimer() { 
    if (animTimerID !== null) { 
     clearTimeout(animTimerID); 
    } 

    animTimerID = setTimeout(animTick, animTimerDelay); 
} 
+0

这也是一个好主意。事实上,这可能是我会做的。 – Amit

1

防止动画期间鼠标事件。
每次我使用这种方法。
一样,

$('#newsLeft').click(function() { 
    if($(this).hasClass('blockEvent')) return false; // return if it's locked 
    $(this).addClass('blockEvent');  // lock it with 'blockevent' class   

    var $active = $('ul#news li.active'); 
    var $next = $active.next().length ? $active.next() : $('ul#news li.firstNews'); 

    $active.animate({opacity:0.0}, 300, function() { 
     //when done animating out, animate next in 
     $next.css({opacity:0.0}) 
      .animate({opacity: 1.0}, 400, function() { 
       $active.removeClass('active'); 
       $next.addClass('active'); 
       $('#newsLeft').removeClass('blockEvent'); // unlock after all animations 
     }); 
    }); 

    return false; 
}); //clickRight 

好运:)

+0

这真是个好主意! – Amit