fadein and slide

by Alin Guta

HTML

<div id="button"><p>Apasă-mă!</p></div>
<div id="show-me">
      <p>Mersi!</p>
</div>

<div class="clear"></div>

<div id="button2"><p>Si pe mine!</p></div>
<div id="show-me2">
      <p>Mersi si eu!</p>
</div>

CSS

#button,
#button2{
    width:200px;
    height:30px;
    color:#fff;
    background:#606060;
    text-align:center;
    cursor:pointer;
    border-radius:15px;
    float:left;
    line-height:0px;
}
#button2{
    float:right;
    line-height:0px;
}
#show-me,
#show-me2{
        display: none;
        opacity: 0.0;
        position: relative;
        float:left;
        font-size:30px;
      }
#show-me2{
    float:right;
}
.clear{
    clear:both;
    height:50px;
}

JavaScript

$('#button2').hide();
$('#button').click(function() {
        $('#show-me')
          .css('display', 'block')
          .animate({opacity: 1.0, left: '100px'}, 500);
        $('#button2').delay(500).fadeIn(500);
});

$('#button2').click(function() {
        $('#show-me2')
          .css('display', 'block')
          .animate({opacity: 1.0, right: '100px'}, 500);
});