Jquery 将div恢复到其原始状态

我不熟悉Jquery，因为这基本上是第一次使用它，我一直在阅读文档以了解我需要做什么，但我被卡住了

HTML

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

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

，但我也无法让这两种方法工作

---

这里有一个

当您使用悬停时，您可以提供两个功能，第一个是当鼠标在元素上时，第二个是当鼠标离开元素时，因此

$( "div.commercialpopup" ).hover(function() {
    $( this ).animate({
        width: "200px",
        fontSize: "1.1em",
    })
  }, function() {
        //change back to normal code
  }
);

JS

.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;
}

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

只需使用mouseleave将div恢复为其原始大小

---

编辑：您也可以使用CSS3进行此操作，谷歌用于转换和动画。

存储您要制作动画的原始CSS值，这样您可以更改样式，并且不会影响动画，因为这些值不是硬编码的：

$("div.commercialpopup").each(function() {
    $(this).data({width: $(this).css('width'), font: $(this).css('font-size')});
}).on({
    mouseenter: function () {
        $(this).animate({
            width: "200px",
            fontSize: "1.1em",
        }, 1500);
    },
    mouseleave: function() {
        $(this).animate({
            width: $(this).data('width'),
            fontSize: $(this).data('font'),
        }, 1500);    
    }
});

---

基本上，在执行悬停之前，您需要记住对象的先前状态。您可以使用jQuery的.data（）特性来记住对象以前的状态。我提供的示例只需要在代码中维护hoverstate。并从css中提取原始状态

这里有一个小提琴展示了我的例子，下面是例子的代码

---

正如其他人已经建议的那样，您需要保持div的原始状态

var originalStyle = window.getComputedStyle(this, null);
$('div.commercialpopup').mouseover(function() {
  $(this).animate({
    width: '200px',
    fontSize: '1.1em'
  }, 1500 );
});

$('div.commercialpopup').mouseout(function() {
  $(this).animate({
    width: originalStyle.style['width']
    fontSize: originalStyle.style['font-size']
  }, 1500 );
});

---

是的，这很有效，干杯，巴德，谢谢。快速跟进问题，如果你将鼠标悬停在它上面，说5次，它将播放动画5次，我如何停止？我记得读过类似.removequeue？我喜欢使用getComputedStyle（）+1。。。但需要注意的是，它只适用于IE9+。其他浏览器大部分都支持它。您可以在这里参考@JohnHartsock的浏览器兼容性，谢谢链接。巧合的是，我在报纸上读到了同样的内容。IE是web开发生活中最大的挑战；）

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

    $( "div.commercialpopup" ).hover(function() {
        var $this = $(this);
        $this.animate((function () {
            //Initialize the hoverState
            if (!$this.data("hoverState")) {
                $this.data("hoverState", {
                    width: "200px",
                    fontSize: "1.1em",
                });
            }
            //Get hoverState
            var hoverState = $this.data("hoverState");
            //Set HoverState
            $this.data("hoverState", { width: $this.width(), fontSize: $this.css("font-size") });
            //return hoverstate to the .animate() function
            return hoverState;
        })(), 1500);
    });
});

var originalStyle = window.getComputedStyle(this, null);
$('div.commercialpopup').mouseover(function() {
  $(this).animate({
    width: '200px',
    fontSize: '1.1em'
  }, 1500 );
});

$('div.commercialpopup').mouseout(function() {
  $(this).animate({
    width: originalStyle.style['width']
    fontSize: originalStyle.style['font-size']
  }, 1500 );
});