Question

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

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

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

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

Answer 1

既然你正在使用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 2

您可以使用css处理转换，只需在.highLight和mousenter

时将mousout类切换到您的元素

$(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/

Answer 3

您的活动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>

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

3 个答案: