jquery how to fire a call only after click event

Question

I'm currently implementing a click function with fade in effects, the only problem is if you don't click straight away the content has already faded away as it started fading when the page was loaded.
Here's my code:

$(document).ready(function(){
$('#slide-02').hide();


$('#button').click(function(){
$('#slide-02').fadeIn(1000);
$('#slide-01').hide();
});
    var charToReplace = ['s', 'b', 'S', 'B'];
    $('#slide-02').html(function (i, v) {
        var resultStr = '';
        for (var i = 0; i < v.length; i++ ) {
            var ch = v.charAt(i);
            
            if ($.inArray(ch, charToReplace) >= 0) {
               resultStr += '<span class="hideMe">' + ch + '</span>';  
            } else {
               resultStr += ch;
            }
        }
        
        return resultStr;
    }).find('.hideMe').delay(2000).fadeOut(3000, function(){
        $(this).css('opacity', 0).show();            
    });
    
    //lets bring it all back
    setTimeout(function () {
        $('#slide-02').find('.hideMe').css('opacity', 0);
    }, 5000);
});

Here's a live mock-up of the code in action too: http://nealfletcher.co.uk/fish/test2/
So #slide-02 is hidden and when #button is clicked #slide-02 fades in, the letters 's' and 'b' fade out of #slide-02 but I only want these letters to start fading once #slide-02 is visible and not start fading when the page is loaded, because currently if you don't click the button straight away, the letters have already faded.
Is there a way to only implement this call AFTER the click function has been implemented?
I will then be adding more slides, one after the other, so I'd like this call to work numerous times if that's possible?

SwiftD · Answer 1 · 2012-12-05T22:13:56.553

Place the code in the function callback of the fadeIn, this will be run when your fadeIn animation has completed, like so:

    $('#button').click(function(){
        $('#slide-02').fadeIn(1000, function () {
           var charToReplace = ['s', 'b', 'S', 'B'];
           $('#slide-02').html(function (i, v) {
               var resultStr = '';
               for (var i = 0; i < v.length; i++ ) {
                   var ch = v.charAt(i);

                   if ($.inArray(ch, charToReplace) >= 0) {
                       resultStr += '<span class="hideMe">' + ch + '</span>';  
                   } else {
                       resultStr += ch;
                   }
               }

               return resultStr;
           }).find('.hideMe').delay(2000).fadeOut(3000, function(){
                $(this).css('opacity', 0).show();            
           });

           //lets bring it all back
           setTimeout(function () {
              $('#slide-02').find('.hideMe').css('opacity', 0);
           }, 5000);            
       });
    $('#slide-01').hide();
    });

score 1 · Answer 2 · answered Dec 05 '12 at 22:11

Just put the code to hide the characters within the click function. Heres an updated demo.

$('#button').click(function(){
    $('#slide-02').fadeIn(1000);
    $('#slide-01').hide();
    var charToReplace = ['s', 'b', 'S', 'B'];
    $('#slide-02').html(function (i, v) {
        var resultStr = '';
        for (var i = 0; i < v.length; i++ ) {
            var ch = v.charAt(i);

            if ($.inArray(ch, charToReplace) >= 0) {
               resultStr += '<span class="hideMe">' + ch + '</span>';  
            } else {
               resultStr += ch;
            }
        }
        return resultStr;
    }).find('.hideMe').delay(2000).fadeOut(3000, function(){
        $(this).css('opacity', 0).show();            
    });

    //lets bring it all back
    setTimeout(function () {
        $('#slide-02').find('.hideMe').css('opacity', 0);
    }, 5000);
});

score 1 · Accepted Answer · answered Dec 05 '12 at 22:12

Can you just put everything inside the click function? Is there a reason you're not doing that?

$('#button').click(function(){
$('#slide-02').fadeIn(1000);
$('#slide-01').hide();
        var charToReplace = ['s', 'b', 'S', 'B'];
    $('#slide-02').html(function (i, v) {
        var resultStr = '';
        for (var i = 0; i < v.length; i++ ) {
            var ch = v.charAt(i);

            if ($.inArray(ch, charToReplace) >= 0) {
               resultStr += '<span class="hideMe">' + ch + '</span>';  
            } else {
               resultStr += ch;
            }
        }

        return resultStr;
    }).find('.hideMe').delay(2000).fadeOut(3000, function(){
        $(this).css('opacity', 0).show();            
    });
});

http://jsfiddle.net/WrM6c/

score 1 · Answer 4 · edited May 23 '17 at 12:22

You can implement a promise to interact with more complex animation chains.

$('#slide-02').promise().done(function() {
    // Rest of your character hiding code goes here
});

That has the benefit of tying to the end of the animation, so you don't have to alter your fade-out timings if you decide to change your fade-out timing.

See also: Jquery - defer callback until multiple animations are complete

jquery how to fire a call only after click event

4 Answers4