如何使用Javascript扩展HTML元素

How to extend an HTML element with Javascript?

本文关键字：HTML 元素 扩展 Javascript 何使用      更新时间：2023-09-26

我有一个div，它是50X100 pxs，当我的鼠标进入它时，我想将高度扩展到125 pxs。div的类名是Home。到目前为止，我拥有的是：

$(document).ready(function(){
    $('.Home').mouseenter(function(){
        $('.Home').animate({height: "125px"})
    })
});

它似乎什么都没做。我是完全错了，还是只是漏掉了一个元素？

使用CSS3 可以轻松做到这一点

HTML:

<div class="home">
la la la la la
</div>

CSS：

.home{
height: 100px;
background: red;
color: #fff;
width: 50px;
transition: height .5s ease-in-out;
-webkit-transition: height .5s ease-in-out;
cursor: pointer;
}
.home:hover{
    height: 125px;
}

$(document).ready(function(){
    $('.Home').mouseenter(function(){
        $(this).animate({height: "125px"})
    })
});

您的代码对我来说非常好。

$(document).ready(function(){
    $('.Home').mouseenter(function(){
        $('.Home').animate({height: "125px"})
    })
});

您可以在此处进行测试：http://jsfiddle.net/actvge85/

你确定你包括jquery吗？

也可以写成：

$(document).ready(function(){
    $('.Home').mouseenter(function(e){
        $(e.target).animate({height: "125px"})
    })
});
相关文章：