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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

Q&A

解決済

1回答

1800閲覧

jqueryでアニメーション中もcssの鏡面反射をつけたい

Masa07xox

総合スコア5

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

0グッド

0クリップ

投稿2017/02/11 03:27

以下のように書いてcssでdivに鏡面反射のエフェクトをかけるところまではうまくいったのですがjqueryでアニメーションをかけるとアニメーション中は鏡面反射の部分が消えてしまいます。
アニメーションが終わるとまた反射の部分も表示されるのですがアニメーション中も鏡面反射の部分を表示させておくことはできないのでしょうか?

どのように書いたらいいのか回答お願いいたします。

html

1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 6 <style type="text/css" media="screen"> 7 #box{ 8 width: 100px; 9 height: 100px; 10 background-color: red; 11 -webkit-box-reflect: below 4px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.5, transparent), to(rgba(0,0,0,0.4))); 12 13 } 14 </style> 15</head> 16<body> 17 <div id="box"></div> 18 <script> 19 setInterval(function(){ 20 $('#box').animate({'left':'50','width':'50px'},500); 21 },3000); 22 </script> 23</body> 24</html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

jQueryAnimateを使用するとそうなる理由はわかりませんが。
※調べればでると思います。

cssでtransitionプロパティを設定あげて、
js側でcssをいじってあげれば期待の動作をすると思います。

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 6 <style type="text/css" media="screen"> 7 #box{ 8 width: 100px; 9 height: 100px; 10 background-color: red; 11 -webkit-box-reflect: below 4px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.5, transparent), to(rgba(0,0,0,0.4))); 12 13 transition: all .5s; 14 } 15 </style> 16</head> 17<body> 18 <div id="box"></div> 19 <script> 20 setInterval(function(){ 21 $('#box').css({'left':'50','width':'50px'}); 22 },3000); 23 </script> 24</body> 25</html>

投稿2017/02/11 03:34

mukkun

総合スコア882

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

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

Masa07xox

2017/02/12 01:47

回答ありがとうございました。 cssでtransitionを設定しておいて、jQueryでcssのtop,leftを変更することで鏡面反射を保ったままアニメーションを追加することができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問