stop jQuery .animate delay - 但 .queue 删除所有延迟

Question

我想在 window 的右下角放置一个 div-容器。这个 div 应该只在你滚动时可见，另外它应该有几秒钟的延迟。这工作正常，但我也不想有一个关闭按钮。问题是，关闭按钮也有延迟，但不应该有延迟。

我读到我必须使用 jquery .queue() 但它会删除所有延迟。由于我是 JS 的新手，我不知道如何正确地实现它。我尝试了多种可能性，但对我来说没有任何效果。也许有人可以在这里帮助我。谢谢！

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

你运行 53 倍你的 animate 功能只有一个 $('.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>

代码笔：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>

stop jQuery .animate delay - 但 .queue 删除所有延迟

stop jQuery .animate delay - but .queue deletes all delays

jquery

delay

jquery-animate