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

Answer 2

当你使用悬停时，你可以提供两个功能，第一个是鼠标在元素上，第二个是它离开时，所以它就像

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

Answer 3

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

$( "div.commercialpopup" ).mouseleave(function() {
$( this ).animate({
    width: "100px",
    fontSize: "1em",
}, 1500 );
});

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

编辑：你也可以使用CSS3，转换和动画谷歌。

Answer 4

正如其他人已经建议的那样，你需要保持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 );
});

Answer 5

存储您想要设置动画的原始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);    
    }
});

FIDDLE

Answer 6

基本上，您需要在执行悬停之前记住对象的先前状态。您可以使用jQuery的.data（）功能来记住对象的先前状态。我提供的示例仅要求您在代码中维护hoverstate。并从你的CSS拉出原始状态。

这是一个显示我的示例的小提琴，下面是示例的代码

http://jsfiddle.net/ymS28/12/

$(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);
    });
});

将div恢复为原始状态

6 个答案: