jquery fade out sliding left

Junsung Park Published at Dev

Junsung Park

I want to make some divs fade out and sliding left at the same time, which is much like dismissing notification cards on Android.

I searched and found some jquery codes.

$('#clickme').click(function(){   
$('#book').animate({
      opacity: 'hide', // animate slideUp
      margin: 'hide',
      padding: 'hide',
      height: 'hide' // animate fadeOut
    }, 'slow', 'linear', function() {
      $(this).remove();
    });
});

but this code makes the div(#book) fade out with sliding up, not left (or right). I read the document about .animate() but I couldn't find how to do that.

MKD

check if this helps you

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").hide("slide", { direction: "left" }, 1000);
    });
});

#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<div id="flip">Click to slide left panel</div>
<div id="panel">Hello world!</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.