jQuery fadein and out is not working properly in Google Chrome

Question

I am having an issue with a simple slideshow that I made using jQuery. The script works fine in all other browsers except Google Chrome. You can find the live site here

There are two things wrong with it:

The slide auto starts but stops after the second slide.
If you click on the slide indicators (....), sometimes the background-image of that slide (which is applied via CSS) appears and sometimes it remains hidden.

On top of all that, I get this error:

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

Here is the JavaScript I am using:

function nextSlide() {
    var visibleSlide = $('#slider li:visible');
    var currentSlide = $(visibleSlide).index() + 1;
    var slideCount = $('#slider li').size();
    var nextSlide = (currentSlide == slideCount) ? 1 : currentSlide + 1;

    $('#slider_indicator a').removeClass('active');
    $(visibleSlide).fadeOut('fast', function() {
        $('#slider li:nth-child(' + nextSlide + ')').fadeIn('fast');
        $('#slider_indicator  li:nth-child(' + nextSlide + ') a').addClass('active');
    });
}

autoslide = setTimeout("nextSlide()", 6000);

$(function() {
    $('#slider_indicator a').bind('click', function(e) {
        clearTimeout(autoslide);
        $('#slider_indicator a').removeClass('active');
        $(this).addClass('active');
        var slide_number = $(this).parent().index() + 1;
        $('#slider li:visible').fadeOut('fast', function() {
            $('#slider li:nth-child(' + slide_number + ')').fadeIn('fast');
        });
        e.preventDefault();
    })
    $('#selection .scrollable .items a').live('click', function(e) {
        var self = $(this);
        $.ajax({
            url: $(self).attr('href'),
            type: 'GET',
            success: function(body) {
                var count = $('#selection .scrollable .items a').length - 1;
                count = (count == 1) ? count + ' Ribbon' : count + ' Ribbons';
                $(self).parent('li').fadeOut('fast', function() {
                    $('#result li a[rel="' + $(self).attr('rel') + '"]').removeClass('added');
                    $(this).remove();
                    $('#selection #header #count').text(count);
                })
            }
        })
        e.preventDefault();
    })
})

Any help is greatly appreciated.

For the error in console event.layerX... use latest version of jquery or see this http://stackoverflow.com/questions/7825448/webkit-issues-with-event-layerx-and-event-layery — The Alpha, Feb 17 '12 at 21:16
this http://stackoverflow.com/questions/316278/timeout-jquery-effects may helps u a bit — xkeshav, Feb 17 '12 at 21:22
I will try the latest version of Jquery. hope that helps. As to to setInterval vs setTimeout. I tried both with the same results — salmane, Feb 17 '12 at 21:22
I promise I used Setinterval before and it did the same thing.. now i switched back to it and it works!! must have been a cache issue but even that doesn't make sense to be honest..Thank you again for your suggestions. I will investigate more what happened and will post my findings. — salmane, Feb 17 '12 at 21:50
From what I can tell, the only thing that I had different before it worked is where i set the clearInterval(autoslide); It was not the first thing executed by the bind. Not sure why it would matter but that's what I found so far. — salmane, Feb 17 '12 at 23:01

elclanrs · Answer 1 · 2012-02-17T21:32:45.220

I'm trying to get what's wrong and why it's not working but:

var currentSlide = $(visibleSlide).index() + 1;

You don't need to wrap visibleSlide in jQuery since it's already a jQuery object.

slideCount = $('#slider li').size();

Usually length is used in this situation instead of size().

var nextSlide = (currentSlide == slideCount) ? 1 : currentSlide + 1;

Haven't tried, it might work, but I think it probably won't be a good solution for later on.

$('#slider_indicator  li:nth-child(' + nextSlide + ') a').addClass('active');

It looks weird, is it missing a quote, or has too much white space, don't know, it just looks like that won't work but I might be wrong. Maybe here's where your problem comes from.

autoslide = setTimeout("nextSlide()", 6000);

I think you're missing val right there.

$('#selection .scrollable .items a').live('click', function (e)

Do you need all those selectors? Also, I think live() is deprecated in favor of on().

var count = $('#selection .scrollable .items a').length - 1;
count = (count == 1) ? count + ' Ribbon' : count + ' Ribbons';

This just gives me the same feeling that it might work sometimes. I don't get why you define count and then you override it with a weird ternary operation. I feel like there might be a better way to do this.

score 1 · Answer 2 · answered Feb 17 '12 at 21:17

1

I don't see you declaring var autoslide anywhere.

And I think you want setInterval, not setTimeout

answered Feb 17 '12 at 21:17

Charlie G

814
9
22

variable autoslide is in it's global scope. – The Alpha Feb 17 '12 at 21:22

score 1 · Answer 3 · answered Feb 17 '12 at 21:35

As I answered in my comment that is working now but in the click event it's not working so you can simply use

$('#slider_indicator a').bind('click', function(e){
    clearInterval(autoslide);
    autoslide=setInterval("nextslide", 6000);
});

But to set the current index you may use your nextslide variable.

score 0 · Answer 4 · answered Feb 17 '12 at 21:38

Not experienced in jQuery, but I think your problem arises in this line:

$('#slider li:nth-child(' + nextSlide + ')').fadeIn('fast');

Should be:

$('#slider li:nth-child(" + nextSlide + ")').fadeIn('fast');

I am not seeing a problem though it could be just my computer.

jQuery fadein and out is not working properly in Google Chrome

4 Answers4