Home > Article > Web Front-end > DIV is bound to mouse events and expands from bottom to top when sliding.

DIV is bound to mouse events and expands from bottom to top when sliding.

php中世界最好的语言Original: 2018-05-15 11:14:008313browse

This time I will bring you a DIV that binds mouse events and expands from bottom to top when sliding. DIV binds mouse events and expands from bottom to top when sliding. What are the precautions?. Here are the actual cases. , let’s take a look.

When the mouse floats, the p slowly expands from bottom to top.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery响应鼠标实现p由下向上展开</title>
<style type="text/css">
  .big{position:relative; width:234px; height:300px; background:#ccc}
  .show{position:absolute; display:none; bottom:0px;display:block; width:100%; height:auto; background:#f66 }
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
 {
  $(".big").hover(function () {
    $(".show").stop(true,true).animate({height:"70px"});
  }, function () {
    $(".show").stop(true,true).animate({height:"0px"});
  });
});
</script>
</head>
<body>
  <!--灰色的p-->
  <p class="big">
    <!--红色的p-->
    <p class="show"></p>
  </p>
</body>
</html>

Principle:

① First of all, the red p is positioned absolutely through position:absolute, and through relative and bottom positioning, such as bottom:0px. ② The bottom positioning is fixed and expands upward when the height becomes higher.
③ Use jQuery’s
$().animate() animation method to control the height change of the red p.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

DIV is bound to mouse events and expands from bottom to top when sliding.

Related articles