Edit in JSFiddle

$("#test2ShowBtn").click(function(){
    $("#test2").css("display","block");
});

$("#test2HideBtn").click(function(){
    $("#test2").css("display","none");
});

$("#test3ShowBtn").click(function(){
    $("#test3").css("height","auto");
    $("#test3").css("opacity","1.0");
});

$("#test3HideBtn").click(function(){
    $("#test3").css("height","0");
    $("#test3").css("opacity","0");
});

<div class="box" id="test1">Transition Test1</div>

<div class="box" id="test2">Display:none Test2</div>
<input type="button" id="test2ShowBtn" value="show Test2">
<input type="button" id="test2HideBtn" value="hide Test2">

    
<div class="box" id="test3">Opacity Test3</div>
<input type="button" id="test3ShowBtn" value="show Test3">
<input type="button" id="test3HideBtn" value="hide Test3">

.box{
    width:100px;
    height:50px;
    margin-top:10px;
    color:#fff;
    background:#000;
    -webkit-transition:1s ease;
}

#test1:hover{
    width:200px;
    color:#000;
    background:#ff0;
}