SOURCE

$("#p1").hide();
$("#div2").mouseenter(function()
                 {
  $("#div1").animate({ width:'200px'},1000);
  $("#p1").show();
})
$("#div2").mouseleave(function()
                 {
  $("#div1").animate({ width:'0px'},1000);
   $("#p1").fadeOut(1000);
})
$(document).ready(function(){
  $("#but2").click(function(){
    $("#div2").animate({left:'250px'});
    
  });
});

<div id="div1"><p id="p1">dasdas</p></div>
<button id="but1">132</button>
<button id="but3">221</button>
<div id="div2"><p>sdasdas</p></div>
<button id="but2">222</button>

#div1{
  width:0px;
  height:200px;
  background-color:red;
text-align:center;
}
#div2{
  width:200px;
  height:200px;
  background-image:URL(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497340497&di=c9bc33c90e4c8f7fe69a90d60e079bff&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.qqtu8.net%2Ff%2F20130924123010_7.jpg)
text-align:center;
}
#p1{
  height:0px;
}