CODEWITHSUNDEEP
javascriptjqueryhtml
Amit Joki
Amit Joki

Reputation: 59232

fade out after click

I want the same behaviour as stackoverflow's.

In SO, after we click the unread inbox, which is red in color and if we click any where else, it fades out.

I have this html:

<small class="notifi pull-right">1</small>

And I'm currently doing:

    $('small.pull-right').click(function () {
        var that = this;
        $(document).one('click', function () {
            $(that).hide('fade');
        });
    });

But, it isn't working. After the <small> is clicked, a dropdown opens. Thats fine. After that if a user clicks somewhere else, it should fade out.

So, what should I?

Upvotes: 0

Views: 701

Answers (3)

Vinoth
Vinoth

Reputation: 11

Try this

Hit Me

$("#smallid").click(function () {

    $("#smallid").fadeOut();
});

Upvotes: 0

Stephan Kulla
Stephan Kulla

Reputation: 5067

You also have a typo here:

$('small.notify.pull-right')

It has to be

$('small.notifi.pull-right')

Here a running demo: http://jsfiddle.net/Hnz5p/

I would write:

var button = $('small.notifi.pull-right');
button.click(function () {
    $(document).one('click', function () {
        button.fadeOut('slow');
    });
});

Upvotes: 0

Boopathi Rajan
Boopathi Rajan

Reputation: 1210

try this

html code

<small class="notifi pull-right">1</small>

jQuery

   $('.pull-right').click(function () {
        var that = this;
        $(document).one('click', function () {
            $(that).hide('fade');
        });
    });

See DEMO

Upvotes: 1

Related Questions