jquery fade out sliding left

Question

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.

Answer 1

You can try this :

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0, // animate slideUp
    marginLeft: '-200px'
  }, 'slow', 'linear', function() {
    $(this).remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='clickme'>Click me!!!</button>
<div id='book' style='width:200px; height:200px; background:black; border:greenyellow 4px solid;position:absolute; top:40px;'>Book</div>

---

Note:

The target element which should be animated has to be positioned relatively/absolutely.

Answer 2

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>