CSS不透明问题

我有一个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

来源

2011-12-28 Amit

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

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

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

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

var animTimerDelay = 4000, 
    animTimerID = null; 

function animTick() { 
    // Animation code here 

    resetTimer(); 
} 

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

    animTimerID = setTimeout(animTick, animTimerDelay); 
}

来源

2011-12-28 05:35:01

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

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

$('#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

好运:)

来源

2011-12-28 05:20:52 Sang

这真是个好主意！ – Amit

CSS不透明问题

回答

相关问题