鼠标悬停时扩展div高度

Question

鼠标悬停时扩展div高度

11

我需要将div的高度默认设为50px，并在鼠标悬停时将其更改为300px。我按照以下方式编写了代码来实现它。

<style type="text/css">
#div1{
height:50px;
overflow:hidden;
}
#div1:hover{
height:300px;
}
</style>
<body>
<div id="div1"></div>
</body>

这段代码运行正常，但根据CSS属性，在鼠标悬停时立即更改其高度。现在，我需要一种时尚的方式，例如在鼠标悬停时缓慢地扩展div，而在移出时收缩。如何在hover时扩展和收缩div？

- Mad coder.

你可以使用jQuery，使用animate函数。在这里查看http://api.jquery.com/animate/。 - Undefined

1

或者您可以使用CSS过渡效果（如果可用）。 - biziclop

5个回答

5

#div1{
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

简单！

- HandiworkNYC.com

哇！太棒了！但是我怎么能减慢滑动速度呢？ - Mad coder.

将示例中的0.3秒增加到1秒。 - HandiworkNYC.com

谢谢！在问你之前我尝试过那个，但是当我从3改成10时并没有发现很大的区别，所以我才问的！不管怎样，非常感谢。 - Mad coder.

你应该注意到，CSS过渡效果在新的浏览器中受到限制。 - jAndy

是的！那就是问题所在。我最好选择具有跨浏览器支持的jQuery！ - Mad coder.

1

你应该检查你所在地区的浏览器支持情况。 http://en.wikipedia.org/wiki/Usage_share_of_web_browsers如果南美几乎所有人都使用Chrome，俄罗斯使用Firefox，那么中国、中东、美国、加拿大和其他地区什么时候会赶上呢？我不会感到惊讶，如果一年后没有人再使用IE8。只有当我们作为网页设计师继续支持IE时，人们才会依赖它。 - HandiworkNYC.com

3

在“现代”浏览器中，您只需应用 css 过渡效果 即可：

#div1 {
    -moz-transition: 4s all ease-in-out;
    -ms-transition: 4s all ease-in-out;
    -webkit-transition: 4s all ease-in-out;
    -o-transition: 4s all ease-in-out;
}

这将在4秒内应用一种过渡效果，使用ease-in-out缓动函数，兼容火狐、IE、Chrome/Safari（Webkit）和Opera浏览器。阅读更多信息：CSS Transitions 您可以进一步检查当前浏览器是否支持CSS过渡，如果可用，则使用它们进行动画，否则使用JavaScript动画脚本。例如：BarFoos animations。

- jAndy

2

你可以使用jQuery的.animate()方法。这将作用于任何带有"class"属性为"tab"的元素，并在鼠标移开时恢复原状。

$('.tab').hover(function() {
     $(this).stop()
     $(this).animate({
        height: '+=250'
      }, 500)

         }, function() {
    $(this).stop()
     $(this).animate({
        height: '-=250'
      }, 500)            
})

- Diodeus - James MacFarlane

谢谢！这段代码很好用，但是它是在PageLoad时执行的。如何在onmouseover时执行此代码？很抱歉问这种愚蠢的问题，但我不知道如何使用jQuery编码！ - Mad coder.

很抱歉！这个没有起作用。我尝试了

<script> jQuery(function($) { $('.tab').hover(function() {      $(this).stop()      $(this).animate({         height: '+=200'       }, 500});    },   $(this).stop()        $(this).animate({         height: '-=200'       }, 500}); }) }); </script>

，并且按照您的建议将 div 修改为 <div id="div1" class="tab"></div>。 - Mad coder.

这段代码存在问题。在你的fiddle中，尝试在滑动时再次悬停。这有点棘手，但是尝试在slideup/slidedown发生时再次悬停。你会明白问题所在。 - Mad coder.

Diodeus，我该如何使用上面的代码（我标记为答案的代码）来执行如果悬停保持5秒钟。 - Mad coder.

1

您可以使用 jQuery 的 .mouseover http://api.jquery.com/mouseover/, .mouseout http://api.jquery.com/mouseout/，以及 .animate http://api.jquery.com/animate/ 来执行该操作。

在 .mouseover 事件中，您可以将高度动画设置为 300px，在 .mouseout 事件中设置为 50px。确保在调用动画之前对 div 调用 .stop，否则可能会出现奇怪的问题。

- Matthew

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dustin · Accepted Answer

有几种方法可以实现，以下是CSS和JQuery的示例，可以在所有浏览器中使用，而不仅仅是现代浏览器：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

  $("#div1").hover(
    //on mouseover
    function() {
      $(this).animate({
        height: '+=250' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
    },
    //on mouseout
    function() {
      $(this).animate({
        height: '-=250px' //substracts 250px
        }, 'slow'
      );
    }
  );

});
</script> 

<style type="text/css">
#div1{
    height:50px;
    overflow:hidden;
    background: red; /* just for demo */
}
</style>

<body>
<div id="div1">This is div 1</div>
</body>