停止jQuery .animate延迟 - 但.queue删除所有延迟

Question

我想在窗口的右下角放置一个div容器。只有滚动时才能看到这个div，另外它应该延迟几秒钟。这很好但我也没有关闭按钮。问题是，关闭按钮也有延迟但它不应该有它。

我已经读过我必须使用jquery .queue（）但它会删除所有延迟。由于我是JS的新手，我不知道如何正确实现它。我尝试了maaaany的可能性，但没有什么工作对我来说很好。也许有人可以帮助我。谢谢！

    $(document).ready(function() {

    /* Every time the window is scrolled ... */
    $(window).scroll( function(){

        /* Check the location of each desired element */
        $('.quick-contact').each( function(i){

            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){


                $(this).delay( 1000 ).animate({'opacity':'1'},500);
                $(this).animate({'bottom':'0px'},500);
            }

        }); 

    });

});
$(document).ready(function(c) {
    $('.alert-close').on('click', function(c){
        $('.quick-contact').fadeOut('fast', function(c){
            $('.quick-contact').remove();
        });
    }); 
});

http://codepen.io/p1x3lp4shr/pen/rxZpNN

Answer 1

您的animate功能只运行了53次$('.quick-contact')

我添加了一个变量active = 1，用于检查动画。

请尝试，它工作正常

$(document).ready(function() {
    var active = 1;
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){
    
        /* Check the location of each desired element */
        $('.quick-contact').each( function(i){
            
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object && active ==1){
                $(this).delay( 1000 ).animate({'opacity':'1'},500);
                $(this).animate({'bottom':'0px'},500);
                active = 0;
            }
            
        }); 
    
    });
    
});
$(document).ready(function(c) {
	$('.alert-close').on('click', function(c){
		$('.quick-contact').fadeOut('fast', function(c){
	  		$('.quick-contact').remove();
		});
	});	
});

.wrapper
{
  width:100%;
  height:1500px;
  position:relative;
}
.quick-contact
{
  width:300px;
  height:200px;
  position:fixed;
  bottom:200px;
  right:0px;
  padding:0px;
  background:#f6f6f6;
  color:#333333;
  opacity:0;
  z-index:99;
}
.alert-close
{
  color:red;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="quick-contact">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<div class="alert-close"><div class="close-btn">Close me</div>
 </div>
</div>
</div>

codepen：http://codepen.io/anon/pen/YwOedm

<强>更新

$(document).ready(function() {

    $(window).scroll( function(){
      if($(window).scrollTop() + $(window).height() == $(document).height()) {
        $(".quick-contact").delay( 1000 ).animate({'opacity':'1'},500);
        $(".quick-contact").animate({'bottom':'0px'},500);
      }
    });
    
});
$(document).ready(function(c) {
	$('.alert-close').on('click', function(c){
		$('.quick-contact').fadeOut('fast', function(c){
	  		$('.quick-contact').remove();
		});
	});	
});

.wrapper
{
  width:100%;
  height:1500px;
  position:relative;
}
.quick-contact
{
  width:300px;
  height:200px;
  position:fixed;
  bottom:200px;
  right:0px;
  padding:0px;
  background:#f6f6f6;
  color:#333333;
  opacity:0;
  z-index:99;
}
.alert-close
{
  color:red;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="quick-contact">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<div class="alert-close"><div class="close-btn">Close me</div>
 </div>
</div>
</div>