jQuery animate не работает должным образом

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

Это происходит потому, что «списки» ДИВ все еще получает свою полную высоту и живой() вызывается до этого. Вам необходимо учитывать это смещение.

$(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>