使用jQuery同时淡入效果和对角线移动答案

【问题标题】：FadeIn effect and diagonal movement at the same time using jQuery使用jQuery同时淡入效果和对角线移动
【发布时间】：2013-06-20 00:20:05
【问题描述】：

我想在下面的链接中创建相同的效果... http://ampolla.com.br/testing/Untitled.html

我想要使用 jQuery 同时进行淡入淡出效果和对角线移动。

链接的效果是我使用一个名为 Hype 的 Mac 应用程序创建的，但它是 HTML5 格式的，并且图像是在 Javascript 文件中调用的。问题是对于响应式项目，我需要在 html 或 css 文件中调用的图像。

谢谢！

【问题讨论】：

【解决方案1】：

有几种方法可以在没有 jQuery 的情况下完成这项任务，我喜欢这样

在 css 文件中为您的图像提供过渡属性和持续时间：

transition: left 1s linear;
transition: top 1s linear;
transition: opacity 1s linear;

（另外别忘了改变元素的'position'属性。默认位置是静态的，你不能用静态位置移动元素）

然后从 javascript 触发事件以更改属性

var myImage = document.getElementById('myElementId');
myImage.style.left = 400;
myImage.style.top = 400;
myImage.style.opacity = 1;

或者如您要求的 jQuery，它更简单

$(#idOfYourElement).animate({
   left:400,
   top:400,
   opacity:1
},1000);   //here 1000 is the duration of animation in milliseconds

您的初始不透明度应为 0。 [为 jQuery 欢呼三声....{它高度简化了任务}]

【讨论】：