CODEWITHSUNDEEP
javascriptjquery
Berchman
Berchman

Reputation: 15

jquery issue with fadeIn and fadeOut

I am trying to create a way to show and hide content inside of divs (based on class) when a user clicks on an anchor link with a specific ID.

I have an A-Z index of letters with anchor links. When someone clicks on a specific link (letter) javascript hides (fadeOut) ALL divs with the specific classes listed. Then the script displays (fadeIn) the div I am after.

Issue is there are 13 of these and I've shared the first 3 below to help give context.

What is happening is some weird timing and delay issues when clicking back and forth between letters. Sometimes the div displaying persists and doesn't fadeOut for a long time even though I have the timing set very short.

I'm sure there is a smarter way to go about this in perhaps a few functions, but I'm not sure how to do that.

Let me know if you have any questions, or need more detail and context.

$('#letter-a').mousedown(function(){    
    $('.letter-b, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function(){
        $('.letter-a').delay(600).fadeIn(500);
    });
});

$('#letter-b').mousedown(function(){    
    $('.letter-a, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function(){
        $('.letter-b').delay(600).fadeIn(500);
    });
});

$('#letter-c').mousedown(function(){    
    $('.letter-a, .letter-b, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function(){
        $('.letter-c').delay(600).fadeIn(500);
    });
});

Upvotes: 0

Views: 157

Answers (3)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Try .stop(true,true)

smaller version of your code 

var cls_all = $('[class*="letter-"]'); //cached
$('[id^="letter-"]').mousedown(function () {
    var cls = this.id;
    cls_all.not('.' + cls).stop(true, true).fadeOut(100, function () {
        $('.' + cls).delay(600).stop(true, true).fadeIn(500);
    });
});

^ attribute-starts-with-selector

* attribute-contains-selector/

Upvotes: 3

Vicky Gonsalves
Vicky Gonsalves

Reputation: 11707

Try this

$('#letter-a').mousedown(function () {
    $('.letter-b, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function () {
        setTimeout(function () {
            $('.letter-a').fadeIn(500);, 600);
        });
    });

$('#letter-b').mousedown(function () {
    $('.letter-a, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function () {
        setTimeout(function () {
            $('.letter-b').fadeIn(500);, 600);
        });
    });

$('#letter-c').mousedown(function () {
    $('.letter-a, .letter-b, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').fadeOut(100, function () {
        $('.letter-c').fadeIn(500);, 600);
    });
});

Upvotes: 0

Gennady Dogaev
Gennady Dogaev

Reputation: 5991

What is happening is some weird timing and delay issues when clicking back and forth between letters.

Try to use stop() method (http://api.jquery.com/stop/):

$('.letter-b, .letter-c, .letter-g, .letter-h, .letter-i, .letter-m, .letter-n, .letter-o, .letter-r, .letter-s, .letter-t, .letter-u, .letter-w').stop().fadeOut(100, function(){
        $('.letter-a').delay(600).fadeIn(500);
    });

If it will not help - try to replace delay() with setTimeout

Upvotes: 1

Related Questions