CODEWITHSUNDEEP
jquery
user1869566
user1869566

Reputation: 110

jQuery slideDown() after hide and slideUp after 5 seconds

How can i make the div #eFileStatus and #sFileStatus slideDown then wait 5 seconds and slideUp, this is my function which currently works and slides up after 5 seconds.

function changeShare(addr)
{
    var conf = confirm("Changing the share url will cause the previous URL to not be accessible\nAre you sure?");
    if(conf == true)
    {   
        // ajax request to change share url, create div after #key containing status message
        $.post("/var/jq/ajaxrequest.php", { changeShare: addr },
        function(data){
            $('#key').after('<div id="'+data.returnValue[0]+'FileStatus">'+data.returnValue[1]+'</div>');
        }, "json");
        // reload data in #key with new share url
        $("#key").load(window.location.pathname+" #key > *");
        // slideup the status message div
        setTimeout(function(){
            $('#eFileStatus').slideUp();
            $('#sFileStatus').slideUp();        
        }, 5000);
    }
}

I have tried: 

        $("#eFileStatus, #sFileStatus").hide().slideDown(function(){
            setTimeout(function(){
                $('#eFileStatus').slideUp();
                $('#sFileStatus').slideUp();        
            }, 5000);
        });

but this doesn't slide down and it also stops the sliding up.

Upvotes: 1

Views: 3368

Answers (1)

user1869566
user1869566

Reputation: 110

Okay i found the solution, as you can see i placed the slideDown inside the ajax function so it waits for the div to be created before trying to slideDown.

function changeShare(addr)
{
    var conf = confirm("Changing the share url will cause the previous URL to not be accessible\nAre you sure?");
    if(conf == true)
    {   
        // ajax request to change share url, create div after #key containing status message
        $.post("/var/jq/ajaxrequest.php", { changeShare: addr },
        function(data){
            $('#key').after('<div id="'+data.returnValue[0]+'FileStatus">'+data.returnValue[1]+'</div>');
            // reload data in #key with new share url
            $("#key").load(window.location.pathname+" #key > *");
            // slideup the status message div
            $("#eFileStatus, #sFileStatus").hide().slideDown().delay(5000).slideUp();
        }, "json");
    }
}

Upvotes: 2

Related Questions