CSS不透明度问题答案

【问题标题】：css-opacity issueCSS不透明度问题
【发布时间】：2017-09-04 01:18:52
【问题描述】：

我有一个 jQuery 循环脚本（我编写的，所以它不是高质量的），它基本上通过动画它们的不透明度来循环 <li> 元素。例如，假设我有三个 <li> 元素。该脚本会将除第一个元素之外的所有元素的不透明度设置为 0，然后当单击“下一步”按钮时，它会将第一个元素的不透明度设置为 0，然后将第二个元素的不透明度设置为 1，并且等等。同时，我有一个setInterval 正在运行，它每四秒单击“下一步”按钮。

问题是，如果用户在setInterval 按下它的同时点击“下一步”按钮，元素的不透明度就会混乱，一些元素最终会相互重叠。

有人可以提出解决方案吗？如果我使用.hide() 函数而不是.css('opacity') 会更好吗？

编辑：这是代码

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

【问题讨论】：

你能上传你的代码或jsfiddle吗？
那么，您为什么不使用做同样事情的大量现有的高质量 jQuery 脚本之一呢？
@MДΓΓБДLL：你说得对，我的决定很糟糕。大约 1.5 年前，我很固执，想尝试自己编写一个代码。从那以后我长大了，当有这么多高质量的公开可用的脚本时，我不会浪费时间编写简单的循环脚本。

标签： javascript jquery z-index opacity

【解决方案1】：

当下一个按钮悬停时重置动画计时器。下面的例子。

var animTimerDelay = 4000,
    animTimerID = null;

function animTick() {
    // Animation code here

    resetTimer();
}

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

    animTimerID = setTimeout(animTick, animTimerDelay);
}

【讨论】：

这也是一个绝妙的主意。事实上，这可能是我会做的。

【解决方案2】：

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

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

祝你好运:)

【讨论】：