我正在尝试使用 jQuery 为内容制作动画。但无法正常工作。
这是一个 jsFiddle 示例：https ://jsfiddle.net/oLt5uwz3/
我不想使用任何height或 jQuery slideUp()/slideDown()。
我想在鼠标离开时按每个内容高度自动下移内容。在此示例中，当我单击?并快速离开鼠标时，动画无法正常工作。
$('.open').click(function(){
$('.lists').slideToggle(); });
$('.next').click(function(){
$('.tip2').fadeIn();
$('.tip1').hide(); });
$('.prev').click(function(){
$('.tip2').hide();
$('.tip1').fadeIn(); });
$(function(){
$('.div').css('bottom','-'+$(".div").outerHeight()+'px'); });
$('.hover, .height').on('mouseenter',function(){
$('.div').stop().animate({bottom:'0px'},'slow'); });
$('.hover, .height').on('mouseleave',function(){
$('.div').stop().animate({bottom:'-'+$(".height").outerHeight()+'px'},'slow');});.div {background:black;width:350px;position:fixed;bottom:0;right:0}
.hover {padding:2px;text-align:center;border-bottom:1px solid #ccc;font-size:12px;color:white;cursor:pointer;background:black;width:15%;display:inline-block;position:absolute;margin-top:-19px}
.tip1 {background:black;color:white;padding:5px}
.tip2 {display:none;background:black;color:white;padding:5px}
.prev, .next {text-align:center;border:1px solid #ccc;font-size:20px;color:white;cursor:pointer;background:black;width:35%;display:inline-block}
.open {padding:2px;text-align:center;border:1px solid #ccc;font-size:12px;color:white;cursor:pointer;background:black;width:22.8%;display:inline-block}
.lists {display:none;background:black;color:white;padding:5px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div">
<div class="hover">Hover</div>
<div class="height">
<div class="tip1">MacBook now comes with 1GB of memory standard and larger hard drives …