Jquery button click to show div right to left with slide animation

Question

I have one problem about click to show right to left div.

This is my DEMO page from jsfiddle.

In this demo you can see the red background color div (Click to show info). When you click this div then the info div will open. But it is not working with rigt to left side.

How can i make it right to left open? Any one can help me in this regard

JS

$(".clickshowinfo").click(function(){
    var id = $(this).data("id");
    $(".user-info").fadeIn().find(".user-info-in").animate({"right":0}, 200);   
});

$(".user-info").click(function(){
    $(".user-info-in").animate({"right":"-200px"},200,function(){
        $(".user-info").fadeOut();   
    }) 

});

$(".cc").click(function(e){ 
    e.stopPropagation();

});

CSS

body{
    background-color:#000;
}
.clickshowinfo{
  margin:0px auto;
  width:150px;
  margin-top:10px;
  cursor:pointer;
  background-color:Red;
}
.global-message-container {
  display: block;
  position: absolute;
  height: auto;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  max-width: 980px;
  min-width:300px;
  margin-top: 80px;
  margin-bottom: 20px;
  margin-right: auto;
  margin-left: auto;
  background-color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.06),0 2px 5px 0 rgba(0,0,0,.2);
  -webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -moz-border-radius: 3px;
  min-height: 140px;
}
.chat-list-container {
  display: block;
  position: absolute;
  float: left;
  width: 30%;
  overflow: hidden;
  padding: 0px;
  bottom: 0;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-right: 1px solid #d8dbdf;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
.chat-container {
  display: block;
  position: absolute;
  width: 70%;
  bottom: 0;
  top: 0;
  right: 0;
  background-color: #f7f9fa;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -moz-border-radius-topright: 3px;
  -moz-border-radius-bottomright: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
@media all and (max-width: 640px){
  .chat-list-container {
    display:none;
  }
  .secret{
    float:left;
    display:block;
  }
  .chat-container{
    width:100%;
  }
}
.user-info {
  display:none;
      transform: translateX(0px);
    right: 0!important;
    left: auto;
    -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  right: auto;
  z-index: 1000!important;
  -webkit-align-self: auto!important;
  -ms-flex-item-align: auto!important;
  align-self: auto!important;
  height: 100%;
  overflow: hidden;
  position: absolute;
  width: 30%;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  background-color:#dddddd;

    }
.user-info-in{
    background-color: #dddddd;
  width: 100%;
  top: 0;
  z-index: 1000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
    }
.cc{
    background-color:blue;
}

Answer 1

If I got it right, you wanted a menu that slides to the left.

What I changed:

1. I changed the animation. I personally prefer animate the width of the window. There are a lot of different ways but I think this one is one of the easier. As you can see in the jsfiddle file the width is changed to the wanted width.

The code:

$(".clickshowinfo").click(function(){
   var id = $(this).data("id");
   $(".user-info").animate({width:"30%"}, 200).find(".user-info-in").animate({width:"100%"}, 200);   
});
$(".user-info").click(function(){
   $(".user-info-in").animate({width:"0%"},200);
   $(".user-info").animate({width:"0%"},200);      
});

The code shows exactly the width animation just click on the Demo link

2. The css now needs the width:0; so that you can't see the div anymore.
   
3. The display:none; has to be removed otherwise the div would be invisible the whole time even when you change the width.
   
4. Right property has to be 0 (Right:0;) on your menu div
   

The div is now "invisible" because it has no width but once you click the button it will get a width and it will push itself away from the left wall which creates the desired animation.

Hope that helps you. If you need more explanation or you want something else then leave a comment.

Demo

Answer 2

It looks like you have not positioned the div(.user-info-in) at a starting position.

Here is the updated fiddle code -

.user-info-in{
  left:auto;
  right: -200px;
}

Updated Fiddle

Let me know if that the same you mean.