使用jQuery同时淡化效果和对角线移动

Question

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

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

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

Thaks！

Answer 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的三个欢呼...... {它极大地简化了任务}]