单击后淡出

Question

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?

Answer 1

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

Answer 2

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');
    });
});

Answer 3

Try this

Hit Me

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

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