0

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

我想要使​​用 jQuery 同时具有淡入淡出效果和对角线运动。

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

谢谢！

4

1 回答 1

1

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

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

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

（另外不要忘记更改元素的“位置”属性。默认情况下，位置是静态的，您不能使用静态位置移动元素）

然后从 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 欢呼三声....{它高度简化了任务}]

于 2013-06-19T16:20:05.287 回答