Question

当我滚动到1400然后从1400滚动到页面顶部时，我的chat1,2,3,4呈现“空”内联样式，但只有1秒。每次我以1秒的延迟滚动时再次使用fadeIn。

基本上我想在滚动到1400时一个接一个地显示4 img，而当滚动到顶部时我希望它们消失：）

(window).scroll(function() {
  var scroll1 = $(window).scrollTop();

  var phoneScreen = $('.phone-screen');

  var chat1 = phoneScreen.find('#chat1');
  var chat2 = phoneScreen.find('#chat2');
  var chat3 = phoneScreen.find('#chat3');
  var chat4 = phoneScreen.find('#chat4');



  //==================== THIS PART =======================//
  if(scroll1 >= 1400){
    chat1.delay(1000).fadeIn(200, function(){
      chat2.delay(200).fadeIn(200, function(){
        chat3.delay(200).fadeIn(200, function(){
          chat4.delay(200).fadeIn(200);
        });
      });
    });

  }else{
    chat1.removeAttr('style');  // tried removeattr and .css both work the same with my example
    chat2.css('display', '');
    chat3.css('display', '');
    chat4.css('display', '');
  }
});

这是我的CSS：

#chat1{
  position: relative;
  top: -1356px;
  z-index: 16;
  display: none;
}

这是我的HTML：

<div class="col-md-4">
  <div class="phone-container">
    <img src="images/Tuto/phone-frame.png" alt="Phone frame">
    <div class="phone-screen">

    <img src="images/Tuto/phone-background.png" alt="Phone background" id="phone-bg">
    <img src="images/Tuto/phone-footer-explore.png" alt="phone footer explore" id="phone-fot-exp">
      <div class="profile-screen">
        <img src="images/Tuto/Joanna.png" alt="Girl Profile" id="Girl-one-prof">
        <img src="images/Tuto/szymon.png" alt="Girl Profile" id="boy-one-prof">
      </div>
    <img src="images/Tuto/match.png" alt="match" class="match">
    <img src="images/Tuto/chat.png" alt="chat" id="chat">
    <img src="images/Tuto/chat1.png" alt="chat1" id="chat1">
    <img src="images/Tuto/chat2.png" alt="chat2" id="chat2">
    <img src="images/Tuto/chat3.png" alt="chat3" id="chat3">
    <img src="images/Tuto/chat4.png" alt="chat4" id="chat4">
  </div>
</div>

Answer 1

您是否考虑使用固定定位元素进行工作？

此外，每次向上滚动时，您都会在每个img动画上触发一个动画片，这些动画会花费他们的精彩时间来完成并完成，因此.hide()已经超出了它的深度，试图隐藏受正在进行的动画影响的对象;输入.stop(true)以保存日期，I quote，停止匹配元素上当前正在运行的动画。

您甚至可以重构此代码，使其仅在通过1400px标记时触发动画，并且仅在向上传递动画时再触发动画。

$('.phone-screen').children('img').each(function(i){
  $(this).css('top', i * $(this).prev().height());
});
$(window).scroll(function() {

var scroll1 = $(window).scrollTop();

var phoneScreen = $('.phone-screen');

var chat1 = phoneScreen.find('#chat1');
var chat2 = phoneScreen.find('#chat2');
var chat3 = phoneScreen.find('#chat3');
var chat4 = phoneScreen.find('#chat4');

//==================== THIS PART =======================//
if(scroll1 >= 1400){
    chat1.delay(1000).fadeIn(200, function(){
        chat2.delay(200).fadeIn(200, function(){
            chat3.delay(200).fadeIn(200, function(){
                chat4.delay(200).fadeIn(200);
            });
        });
    });

}else{
  $('[id^="chat"]').stop(true).hide();
}
});

[id^="chat"]{
    position: fixed;
    top: 0;
    z-index: 16;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="phone-screen">
  <img id="chat1" alt="chat1">
  <img id="chat2" alt="chat2">
  <img id="chat3" alt="chat3">
  <img id="chat4" alt="chat4">
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>

如何使用jQuery滚动事件删除内联样式？

1 个答案: