Jquery：一旦滚动到特定位置，就会从右上角为图像设置动画答案

【问题标题】：Jquery : animate image from right corner once scrolled to specific positionJquery：一旦滚动到特定位置，就会从右上角为图像设置动画
【发布时间】：2015-10-12 00:37:14
【问题描述】：

我要为右侧的图像表单设置动画。当页面向下滚动其不可见并且当页面到达那里时图像从现在开始浮动我可以像这样检测滚动的位置

jQuery(document).ready(function($){
  var target = $(".myimages").offset().top;
var interval = setInterval(function() {
    if ($(window).scrollTop() >= target) {
        alert("image found ");
        //here float the image 
    }
}, 250);
  });

现在我想做的是将图像从右上角浮动到其宽度。我只知道它可以使用这样的动画

   $('.myimages').animate({css properties here})

但是不知道怎么用，请帮忙

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

这里是animate函数的jQuery API：http://api.jquery.com/animate/

以及如何使用它的一些示例：

$( ".myimages" ).animate({
    right: "100px",
    width: "200px"
}, 1000);

在 jsfiddle 上发布您的工作代码，以便我们更好地帮助您。

【讨论】：

【解决方案2】：

我觉得用起来比较好。

默认使用 css3 转换将其放置在右侧

$(document).ready(function(){
  initAnimation();
});

function initAnimation() {
  var win = $(window);
  var targetImage = $('.myimages');

  var animate = function() {
    if ($(window).scrollTop() >= targetImage.offset().top) {
      targetImage.addClass('active');
    }
    else {
      targetImage.removeClass('active');
    }
  };

  win.on('load scroll', animate);
}

.myimages {
  transform: translate(100%, 0);
  transition: transform 0.5s ease-in-out;
}

.myimages.active {
  transform: translate(0, 0);
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：