Hide div after being shown

Question

I have some code that shows a div with a message in it when button is clicked. I want the div to disappear after a few seconds.

I have tried to achieve this adding $(this).delay().hide(500); in the .notify function but it doesn't work.

$.fn.notify = function(settings_overwrite) {
    settings = {
        placement: "top",
        default_class: ".message",
        delay: 0
    };
    $.extend(settings, settings_overwrite);

    $(settings.default_class).each(function() { $(this).hide(); });

    $(this).show().css(settings.placement, -$(this).outerHeight());
    obj = $(this);

    if (settings.placement == "bottom") {
        setTimeout(function() { obj.animate({ bottom: "0" }, 500) }, settings.delay);
    }
    else {
        setTimeout(function() { obj.animate({ top: "0" }, 500) }, settings.delay);      
    }
}

/** begin notification alerts
-------------------------------------**/
$(document).ready(function($) {
    $('.message').on('click', (function() {
        $(this).fadeTo('slow', 0, function() {
            $(this).slideUp("slow", function() {
                $(this).remove();
            });
        });
    }));
});

$(document).ready(function() {
    if (document.location.href.indexOf('#notify_success') > -1) {
        $("#notify_autopop").notify({
            delay: 500
        });
    }
});

Answer 1

You can write your code to hide the div in the 2nd argument of show() methos which is a complete callback. You need to hide() the element in this callback. You can put necessary timeout before hide().

Answer 2

You can use CSS3 animation/transition instead of jquery's animation. and you can use setTimeout to fade message after sometime.

See the below code

JS

$.fn.notify = function(message, settings_overwrite){
    var settings = {
        placement:"top-left",
        delay: 2000
    };

    $.extend(settings, settings_overwrite);
    var $this = $(this);
    $this.removeClass('bottom-left top-left');
    $this.text(message);
    $this.addClass(settings.placement + ' display');
    $this.on('click', function(){
         $this.removeClass('display');
    });
    setTimeout(function(){
        $this.removeClass('display');
    }, settings.delay);
}

$(document).ready(function ($) {

$('body').on('click', '.create-message', function(){
        $('.message').notify($('#msg').val(), {
            placement: $('#pos').val()
        });
    });
});

HTML

Position :
<select id="pos">
    <option value="top-left" selected>Top Left</option>
    <option value="bottom-left">Bottom Left</option>
</select>
<br/>
<textarea id="msg"></textarea>
<br/>
<button class="create-message">show message</button>


<div class="message"></div>

CSS

.message{
    position: fixed;
    width: 100px;
    height: 50px;
    background: green;
    color: white;
    padding: 3px;
    border-radius: 3px;
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

.message.display {
    opacity: 1;
}

.message.top-left {
    top: 10px;
    right: 10px;
}

.message.bottom-left {
    bottom: 10px;
    right: 10px;
}

jsfiddle link - http://jsfiddle.net/jigardafda/ac5wyfo9/3/

Answer 3

You can use setTimeout function You have to store the divobj in a variable and then use it inside the setTimeout function

  $('div').click(function(){
    //show the message
    var divObj = $(this);
    setTimeout(function(){
      divObj.hide();
    },3000);

    });

check the fiddle link https://jsfiddle.net/uujf8hmq/

Answer 4

Usually we do not use $(document).ready(function() {....}(); twice on a single page.

Try writing code to hide the div inside the same $(document).ready(function() {.....}() after the .show() function.

You can use either .hide() or setTimeout() functions to hide the div.