CODEWITHSUNDEEP
javascriptjqueryhtmlfadeinfadeout
Shannon Horcicka
Shannon Horcicka

Reputation: 23

jQuery Stop fadeOut/fadeIn Loop

Hi Everyone,

I'm working on a little jQuery, and trying my hand at fading out & in a single element.

What I am trying to achieve from this is to fade a HTML button element out when it is clicked, replacing the text inside, and then fading the button back in with the new text. But when I add the fadeOut(); & fadeIn(); functions to only the first click handler, it creates a fading out/in loop for each time the mouse is clicked. I would only like the first click to fade out & in the button element.

This code is only for experimenting on & as I am only just learning about jQuery, it is not that important if i cant find an answer to this problem. This question is only out of curiosity as to if you can somehow stop the effects from looping.

HTML Code:

<!doctype html>
<html lang="en">
<head>
<title>jQuery Test</title>
<meta name="description" content="jQuery Test">
<meta name="author" content="Shannon">
<meta charset="utf-8">
<link rel="stylesheet" href="">
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<button type="button">Click Me</button>
</body>
</html>

jQuery Code: (Before Fading Effect Is Added)

$(document).ready(function(){
    $("button").click(function(){
        $("button").text("You clicked me!");
    $("button").click(function(){
        $("button").text("You clicked me again!!");
    $("button").click(function(){
        $("button").text("You clicked me 3 times!!!");
    });
    });
    });
});

jQuery Code: (After Fading Effect Is Added)

$(document).ready(function(){
    $("button").click(function(){
        $("button").fadeOut();
        $("button").text("You clicked me!");
        $("button").fadeIn();
    $("button").click(function(){
        $("button").text("You clicked me again!!");
    $("button").click(function(){
        $("button").text("You clicked me 3 times!!!");
    });
    });
    });
});

Thanks for taking time to read my question, and forgive me if i break any rules on asking questions as this is my first time

--

Edit:

Thank you all for replying to my question so fast. You all deserve praise on your efforts and knowledge on jQuery. As you can tell, I am still quite a Novice with a long way to go...

--

Upvotes: 2

Views: 1625

Answers (3)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

One solution is to use on and off to attach/detach the clicks:

http://jsfiddle.net/82H9A/1/

$(document).ready(function () {
    $("button").on('click',function () {
        $("button").off('click');
        $("button").fadeOut(function () {
            $("button").text("You clicked me!");
            $("button").fadeIn();
        });
        $("button").on('click', function () {
            $("button").off('click');
            $("button").text("You clicked me again!!");
            $("button").click(function () {
                $("button").text("You clicked me 3 times!!!");
            });
        });
    });
});

I also set the text and fade in after the fadeout completes...

As it was a poor use of selectors, almost exactly like PSLs first example, I will publish a cleaner version:

http://jsfiddle.net/82H9A/3/

$(document).ready(function () {
    $("button").on('click',function () {
        var $button = $(this);
        $button.off('click');
        $button.fadeOut(function () {
            $button.text("You clicked me!");
            $button.fadeIn();
        });
        $button.on('click', function () {
            $button.off('click');
            $button.text("You clicked me again!!");
            $button.click(function () {
                $button.text("You clicked me 3 times!!!");
            });
        });
    });
});

Disclaimer:

While this code is almost identical to what PSL came up with at the same time, but now chooses to complain about, I agree this is a really bad example of how to use selectors. The repeated use of $("button") is for demo purposes only and should not by attempted by anyone except a trained stunt-coder :)

Upvotes: 1

adeneo
adeneo

Reputation: 318202

$(document).ready(function(){
    $("button").on('click', function(){
        var self  = $(this),
            speed = 500,
            numb  = self.data('numb')?self.data('numb'):0,
            txt   = {
                1:'You clicked me!',
                2:'You clicked me again!!',
                3:'You clicked me 3 times!!!'
            };
        (function(f) {
            $.when( self.stop(true,true).fadeOut(speed) ).always(function() {
                self.text(txt[f]).fadeIn(speed);
            });
        })(++numb);
        self.data('numb', numb = numb > 2 ? 0 : numb);
    });
});

FIDDLE

Upvotes: 1

CaribouCode
CaribouCode

Reputation: 14398

You want to use a callback function from the first fadeOut or the text will change whilst the fadeOut is happening.

$('button').click(function(){
    $('button').fadeOut(function(){
        $(this).text('You Clicked me!').fadeIn();
    });
});

See it working here: http://jsfiddle.net/6kSxg/1/

Upvotes: 1

Related Questions