animate button height and width on hover - mouseleave not working -

This is a button with information inside of me There is no information on the divi display:

  & Lt; Div class = "button" & gt; & Lt; H2 & gt; Notification & lt; / H2 & gt; & Lt; Div class = "notification" & gt; & Lt; P & gt; This notification text is & lt; / P & gt; & Lt; P & gt; This notification text is & lt; / P & gt; & Lt; / Div & gt;  

  p, h2 {padding: 0; Margin: 0; }. Button {background: red; Width: 150px; Height: 40px; }. Information {display: none; }  

When I hover the button, I want to extend its width to one height and want to fade in the information box which is working fine. The info lamp on the mouselevel will not be displayed again and the button divisor should be animated at its beginning width and height:

  $ ('.button'). HoverIntent ($ function () {$ (this). ({Width: 400, height: 220}, 800, work () {$ ('. Button'). ('Notification') .FEDNE (); $ (' $ '(' Info '). (' Notification ') .Fedaut (200); $ (this). Value ({width: 150, height: 40}, 500 , Function () {// animation complete}};});});});  

Can you please help me with your code? I'm not really anyone I'm doing wrong.

Here is the same code on JSFiddle:

Thank you.

Here my pure javascript informs you, I think it's easy, onmouseover Simple function using and onmouseout