Javascript 在div外部可见的文本动画中移动_Javascript_Jquery_Html_Css

Javascript 在div外部可见的文本动画中移动

javascript jquery html css

Javascript 在div外部可见的文本动画中移动,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图从悬停时的红色平铺的div底部移入文本，但当我悬停时，文本从平铺外部可见，并移入，我希望它看起来像是从平铺底部移入的 <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.3.1.min.js

我试图从悬停时的红色平铺的div底部移入文本，但当我悬停时，文本从平铺外部可见，并移入，我希望它看起来像是从平铺底部移入的

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="tile">
        <div class="front">
        </div>
        <div class="back"></div>    
    </div>
</body>
</html>

Jquery：

$(document).ready(function(){
    $(".tile").hover(function(){
            $(".front").hide().empty();
            $(".back")
            $(".back").show().append("<h3>Welcome</h3>" +
                "<p>This is th content being changed</p>");
            $(".back").animate({top:'-=100px',opacity:"1"},"slow");
    },function(){
        $(".back").animate( {top:"+=100px",opacity:"0"},"fast").hide().empty();
        $(".front").show().append("<h3>Hello<h3>");
    });
});

溢出：隐藏

如有必要，内容将被剪裁以适合填充框。没有滚动条提供

这意味着.tile范围之外的文本将不可见

$document.readyfunction{ $.tile.hover函数{ $.front.hide.empty；美元背面 $.back.show.appendWelcome+ 这是正在更改的内容

； $.back.animate{ 顶部：'-=100px'，不透明度：1 }，慢； }，功能{ $.back.animate{ 顶部：+=100px，不透明度：0 }，fast.hide.empty； $.front.show.appendHello； }; }; 身体{ 背景色：黑色； } .瓷砖{ 背景：红色；左边距：400px；利润上限：200px；高度：100px；宽度：200px；颜色：白色；溢出：隐藏； z指数：-1； } .tile:悬停{ 变换：旋转360度； z指数：-1； } .回来{ 顶部：100px；位置：绝对位置； }

$(document).ready(function(){
    $(".tile").hover(function(){
            $(".front").hide().empty();
            $(".back")
            $(".back").show().append("<h3>Welcome</h3>" +
                "<p>This is th content being changed</p>");
            $(".back").animate({top:'-=100px',opacity:"1"},"slow");
    },function(){
        $(".back").animate( {top:"+=100px",opacity:"0"},"fast").hide().empty();
        $(".front").show().append("<h3>Hello<h3>");
    });
});

.tile {
  background: red;
  margin-left: 400px;
  margin-top: 200px;
  height: 100px;
  width: 200px;
  color: white;
  overflow: hidden; // add this line
  z-index: -1;
}