javascript - jQuery 动画无法正常工作

Question

我正在尝试使用 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 for the entire line perfect for running more of your favorite applications and storing growing media collections.</div>
    <div class="tip2">iPhone is a revolutionary new mobile phone that allows you to make a call by simply tapping a name or number in your address book, a favorites list, or a call log. It also automatically syncs all your contacts from a PC, Mac, or Internet service. And it lets you select and listen to voicemail messages in whatever order you want just like email.</div>
    <div class="prev"><</div>
    <div class="next">></div>
    <div class="open">?</div>
        <div class="lists">
            <ol>
                <li>Product 1 / Price : $10</li>
                <li>Product 2 / Price : $20</li>
                <li>Product 3 / Price : $30</li>
                <li>Product 4 / Price : $40</li>
                <li>Product 5 / Price : $50</li>
            </ol>
        </div>
    </div>
</div>

Answer 1

发生这种情况是因为“lists”div 仍在获得其完整高度，并且在此之前调用了 animate()。您需要考虑该偏移量。

$(function () {
    var initialHeight = $('.lists').outerHeight();

    $('.open').click(function () {
        if ($(this).attr('toggled') == "true")
            $(this).attr('toggled', "false");
        else
            $(this).attr('toggled', "true");

        $('.lists').slideToggle();
    });

    $('.next').click(function () {
        $('.tip2').fadeIn();
        $('.tip1').hide();
    });

    $('.prev').click(function () {
        $('.tip2').hide();
        $('.tip1').fadeIn();
    });

    $('.div').css('bottom', '-' + $(".div").outerHeight() + 'px');

    $('.hover, .height').on('mouseenter', function () {
        $('.div').stop().animate({ bottom: '0px' }, 'slow');
    });

    $('.hover, .height').on('mouseleave', function () {

        if ($('.open').attr('toggled') == "true") {
            remainingHeight = (initialHeight - $(".lists").outerHeight());
            $('.div').stop().animate({ bottom: '-' + ($(".height").outerHeight() + remainingHeight) + 'px' }, 'slow');
        }
        else {
            if ($('.lists').css('display') != 'none')
                remainingHeight = $(".lists").outerHeight();
            else
                remainingHeight = 0;
            $('.div').stop().animate({ bottom: '-' + ($(".height").outerHeight() - remainingHeight) + '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 for the entire line perfect for running more of your favorite applications and storing growing media collections.</div>
    <div class="tip2">iPhone is a revolutionary new mobile phone that allows you to make a call by simply tapping a name or number in your address book, a favorites list, or a call log. It also automatically syncs all your contacts from a PC, Mac, or Internet service. And it lets you select and listen to voicemail messages in whatever order you want just like email.</div>
    <div class="prev"><</div>
    <div class="next">></div>
    <div class="open" toggled="false">?</div>
        <div class="lists">
            <ol>
                <li>Product 1 / Price : $10</li>
                <li>Product 2 / Price : $20</li>
                <li>Product 3 / Price : $30</li>
                <li>Product 4 / Price : $40</li>
                <li>Product 5 / Price : $50</li>
            </ol>
        </div>
    </div>
</div>