0

以下のリンクで同じ効果を作成したい... http://ampolla.com.br/testing/Untitled.html

jQueryを使ってfadeIn効果と斜め移動を同時にしたい。

リンクの効果は、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 である必要があります。

于 2013-06-19T16:20:05.287 に答える