jquery - 将 div 恢复到其原始状态

Question

我是 Jquery 新手，因为这基本上是第一次使用它，我一直在阅读文档以了解我需要做什么，但我陷入了困境。

HTML

<div class="commercialpopup">
    <p class="close-div">x<p>
    <p><a href="blueindex.php">Go to Commercial</a></p>
</div>

CSS

.commercialpopup {
    background-color: #038CDB;
    border-bottom: 3px solid #FFFFFF;
    border-right: 3px solid #FFFFFF;
    border-top: 3px solid #FFFFFF;
    border-radius: 0 0 20px;
    box-shadow: 2px 2px 5px #888888;
    color: #FFFFFF;
    height: 54px;
    left: 0;
    padding: 0 10px;
    position: fixed;
    top: 31px;
    width: 158px;
    z-index: 9999;
    transition: border-color 0.5s linear;
    -moz-transition: border-color 0.5s linear;    /* FF3.7+ */
    -o-transition: border-color 0.5s linear;      /* Opera 10.5 */
    -webkit-transition: border-color 0.5s linear; /* Saf3.2+, Chrome */
}

.commercialpopup a{
    color: #FFF;
    transition: color 0.5s linear;
    -moz-transition: color 0.5s linear;    /* FF3.7+ */
    -o-transition: color 0.5s linear;      /* Opera 10.5 */
    -webkit-transition: color 0.5s linear; /* Saf3.2+, Chrome */
}

.close-div{
    color: #FFFFFF;
    float: right;
}

.close-div:hover{
    color: #999999;
    cursor: pointer;
}

.commercialpopup:hover{
    border-bottom: 4px solid #007BCA;
    border-right: 4px solid #007BCA;
    border-top: 4px solid #007BCA;
}

.commercialpopup a:hover{
   text-decoration: none !important;
}

Jquery

$(".close-div").click(function() {
    $(this).parent().fadeOut( "slow" );
});

//this is the part I need help with
$( "div.commercialpopup" ).hover(function() {
    $( this ).animate({
        width: "200px",
        fontSize: "1.1em",
    }, 1500 );
});

我需要做的是，当鼠标没有悬停在 div 上时，它会通过反转动画返回到原始 CSS。我知道这可能看起来很简单，但我被困住了几个小时。我查看了 .mouseover/.mouseout 以及 .addclass/.removeclass 但我也无法让这两种方法起作用。

这是一个jsfiddle

Answer 1

Fiddle Link

JS

$( "div.commercialpopup" ).hover(function() {
     $( this ).animate({
      width: "200px",
      fontSize: "1.1em",
  }, 1500 );
},
 function() {
  $(this).animate({width: "158px",
            fontSize: "1em",
   }, 1500 );
 });