为什么当我的鼠标离开该区域时，我的 div 没有恢复正常？

Question

我正在使用一些 javascript 在鼠标进入目标区域时增加 div 的大小，但是当鼠标进入目标区域时我希望它 return 到正常大小鼠标离开目标区域。

不确定我的代码有什么问题。

$(document).ready(function() {
$(".someContent").on("mouseenter", function() {
    $(this).toggleClass("highLight");
    if ($(this).hasClass('highLight')) {
    $(this).animate({"width": "80%", "height": "200px", "opacity": "1"}, "fast");
} else {
    $(this).animate({"width": "30%", "height": "60px", "opacity": "1"}, "fast");
}
$(".someContent").on("mouseleave", function() {
    $(this).toggleClass("highLight");
});
});
})

我现在可以使用

$(document).ready(function() {
$(".someContent").on("mouseenter", function() {
    $(this).toggleClass("highLight");
    if ($(this).hasClass('highLight')) {
        $(this).animate({"width": "80%", "height": "200px", "opacity": "1"}, "fast");
    } else {
        $(this).animate({"width": "30%", "height": "60px", "opacity": "1"}, "fast");
    }
}).on("mouseleave", function() {
    $(this).toggleClass("highLight");
});
})

我觉得有更好的方法。我正在尝试使用 javascript 而不是 css 来学习 javascript。

Answer 1

您的事件mouseleave定位错误，您没有删除动画添加的样式。

$(document).ready(function() {
    $(".someContent").on("mouseenter", function() {
        $(this).toggleClass("highLight");
        if ($(this).hasClass('highLight')) {
            $(this).animate({"width": "80%", "height": "200px", "opacity": "1"}, "fast");
        } else {
            $(this).animate({"width": "30%", "height": "60px", "opacity": "1"}, "fast");
        }
    }).on("mouseleave", function() {
        $(this).toggleClass("highLight");
        $(this).removeAttr( 'style' );
    });
})

.someContent {
  background-color: red;
  height: 50px;
  width: 50px;
  position: relative;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>


<div class="someContent">
  Hello
</div>

Answer 2

由于您正在使用 jQuery，您可能想尝试一些不那么笨拙的东西：

$(".someContent").hover( function() {
    $(this).toggleClass("highLight");

}
, function() {
    $(this).toggleClass("highLight");
});

并使用 CSS 转换（如果可以）触发效果：

.someContent {
    width: 300px;
    height: 300px;
    background: black;
    transition: width 0.5s, height 0.5s;
}

.highLight {
    border: 1px solid red;
    width: 80%;
    height: 200px;
}

这是一个工作示例：http://jsbin.com/kagesoqaca

Answer 3

您可以使用 css 处理过渡，并在 mousenter 和 mousout

时将 .highLight class 切换到您的元素

$(document).ready(function() {
    $(".someContent").mouseenter(function() {
        $(this).toggleClass("highLight");
    }).mouseout(function() {
        $(this).toggleClass("highLight");
    });
})

CSS

.someContent{
    background:#ff5656;
    height:60px;
    width:30%;
    opacity:0.5;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.highLight{
    width:80%;
    height: 200px;
    opacity:1;
}

http://jsfiddle.net/qvukpoLb/

为什么当我的鼠标离开该区域时，我的 div 没有恢复正常？

Why is my div not returning to normal when my mouse leaves the area?

jquery

mouseenter

mouseleave