質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1651閲覧

アニメーションさせた要素をまた同じ位置に表示させる方法

miyanoko

総合スコア14

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2015/09/09 14:17

js初心者です。
Velocity.js を用いたアニメーションを実行したあと、その要素をまた再表示させるには以下のようなプログラムのあとどのような設定をすれば良いのでしょうか?
<img>に .img_1 というclass名をつけてアニメーションをつけています。

$(".img_1").velocity({
opacity: 1,
right:"100px",
top:"20px"
}, 2000);
var rotate = {rotateZ:'-=360deg',translateX:'+=500px',translateY:'+=250px'}
$('.img_1').ready(function(){
$('.img_1').velocity(rotate,{
duration:1500,
easing:'ease',
delay:200,
display:'none'
});

何か上記の時点でおかしな点もありましたら、宜しければお教えいただけると嬉しいです。宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

すいません。
なぜvelocityを2つの関数に理由ているのかわからなかったのですが、

javascript

1$(".img_1").velocity({ 2 opacity: 1, 3 right:"100px", 4 top:"20px" 5 }, 2000) 6 .velocity({ 7 rotateZ:'-=360deg', 8 translateX:'+=500px', 9 translateY:'+=250px' 10 }, 11 { 12 duration:1500, 13 easing:'ease', 14 delay:200, 15 display:'none', 16 complete: function(){ 17 var $this = $(this); 18 setTimeout(function(){ 19 $this.show(); 20 //ここにvelocity書いてもいい 21 },2000) 22 } 23 })

単純にcomplete functionの後に追加すれば大丈夫だと思います!
ライブラリを読むと
velocity({}).velocity({})とつなげることができるようなのですがうまくわからず。。。(笑)
一応これで動くと思います!

あと、jqueryのアドバイスですが、トリガーとなる要素(上の場合.img_1)ですが、できればid属性を使用するほうがいいと思います。
.で指定するとjqueryはhtmlの中のすべての要素を確認しなければいけない(同一のクラスは何個でもhtmlの中にかけるから)ですが、idは見つけた瞬間に探すのをやめます(同一のidはhtmlの中に一個だけ)ので!

頑張ってください!

投稿2015/09/10 01:43

MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyanoko

2015/09/10 15:10 編集

とても分かりやすい回答有難うございました、無事イベントが動作されました! そしていろいろアドバイスをくださり有難うございます、まだまだjsに関しては勉強不足の方が目立ちますが頑張ります!
MasakazuFukami

2015/09/11 06:16

はい!頑張ってください! 応援してます!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問