Question

当页面滚动到该区域时，我想在页面的特定部分为图像设置动画。动画应该是这样的：当页面加载图像是不可见的时，我们向下滚动该图像fdesIn并从右向左移动100px。

这就是我做的滚动位置

jQuery(document).ready(function($){
 $('.myimages').hide();
 var target = $(".img-div").offset().top; 
 var interval = setInterval(function() {
  if ($(window).scrollTop() >=target)
   {                 
     $('.myimages').fadeIn();
   }
   }, 250);
  });

现在而不是根据上面提到的标准，我需要为它制作动画的图像褪色我试过这样的事情

$('.myimages').animate({right:'100'}, 200);

但这不起作用请帮帮我

Answer 1

不是每隔几秒触发setInterval，而是将其绑定到window的{{1}}事件。

scroll

要为$(window).scroll(function () { if ($(window).scrollTop() >= target) $('.myimages').fadeIn(); });和其他类似的CSS属性设置动画，您需要将right的位置设置为.image之外的其他位置。

static

所以，你需要在CSS中使用它：

$('.myimages').animate({
  right: 100
}, 200);

工作代码段

.myimages {position: absolute;}

$(function () {
  $("img").hide();
  $(window).scroll(function () {
    if ($(window).scrollTop() > $("img").scrollTop())
      $("img").show().addClass("bounceInRight");
  });
});

.animated { 
  -webkit-animation-duration: 1s; 
  animation-duration: 1s; 
  -webkit-animation-fill-mode: both; 
  animation-fill-mode: both; 
  -webkit-animation-timing-function: linear; 
  animation-timing-function: linear; 
} 

@-webkit-keyframes bounceInRight { 
  0% { 
    opacity: 0; 
    -webkit-transform: translateX(2000px); 
  } 
  60% { 
    opacity: 1; 
    -webkit-transform: translateX(-30px); 
  } 
  80% { 
    -webkit-transform: translateX(10px); 
  } 
  100% { 
    -webkit-transform: translateX(0); 
  } 
} 

@keyframes bounceInRight { 
  0% { 
    opacity: 0; 
    transform: translateX(2000px); 
  } 
  60% { 
    opacity: 1; 
    transform: translateX(-30px); 
  } 
  80% { 
    transform: translateX(10px); 
  } 
  100% { 
    transform: translateX(0); 
  } 
} 

.bounceInRight { 
  -webkit-animation-name: bounceInRight; 
  animation-name: bounceInRight; 
}

img {max-width: 100%;}

Jquery：滚动动画图像

1 个答案: