CODEWITHSUNDEEP
javascriptjqueryz-indexopacity
Amit
Amit

Reputation: 7838

css-opacity issue

I have a jQuery cycle script (which I wrote, so it's not high quality) that basically cycles <li> elements by animating their opacity. For example, say I have three <li> elements. The script would set the opacity of all elements but the first one to 0, then when a "next" button is clicked, it will animate the opacity of the first one to 0, then animate the opacity of the second one to 1, and so forth. At the same time, I have a setInterval running that literally clicks the "next" button every four seconds.

The problem is, if the user clicks the "next" button at the same time as the setInterval pushes it, the opacity of the elements messes up, and some elements end up on top of each other.

Could anyone suggest a solution? Would it work better if I used the .hide() function instead of the .css('opacity')?

EDIT: This is the code

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

Upvotes: 1

Views: 110

Answers (2)

nikc.org
nikc.org

Reputation: 16972

Reset the animation timer when the next-button is hovered. Example below.

var animTimerDelay = 4000,
    animTimerID = null;

function animTick() {
    // Animation code here

    resetTimer();
}

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

    animTimerID = setTimeout(animTick, animTimerDelay);
}

Upvotes: 1

Ron
Ron

Reputation: 2790

prevent mouse event during animation.
every time I use this method.
like,

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

good luck :)

Upvotes: 1

Related Questions