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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

7586閲覧

要素の位置をアニメーション付きで移動させるには?

D.O

総合スコア55

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2015/08/23 00:42

みなさんこんにちは

HTML、CSS、JavaScriptでトランプゲームのようなものを作りたいと思っています

下はイメージなのですが場に5枚のカード(画面下側に並んでいるカード)があって、クリックすると台札として、画面上側中央にスーッと移動(アニメーション付きで)させたいと思っています。

イメージ説明

いろいろ試しているのですがどうもうまくいきません。

たとえば..
cssで、もともとカードにはcardというクラスをつくってスタイリングしておいて、クリックされたときにmovingというクラスを追加すればよいかな?とおもったんですが...これはうまくいきませんでした。

.moving {
postion:absolute;
left:0;
right:0;
top:30px;
margin:auto;
}

card {
transition:all 1s;
}

ではということで...
カードをクリックすると、クリックしたカードの要素を取得して
JavaScriptで
obj.setAttribute('style','position: absolute;top:30px;left:0;right:0;margin:auto;')
としてみたのですが..カード自体は移動されますがアニメーションされずに瞬間的にいってしまいます。
transition:all 1s;が効いていない感じです。

どのような方法だとスマートに出来るでしょうか?

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

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

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

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

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

guest

回答2

0

ベストアンサー

極々簡単なコードを書いてみましたが動作します。
今回の問題は、position のスぺル間違いです。
× postion
○ position

html

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<style> 6.text { 7 position: absolute; 8 top: 10px; 9 transition: all 1s; 10} 11</style> 12</head> 13<body> 14<div class="text" onclick="this.style.top='50px'">ここをクリック</div> 15</body> 16</html>

投稿2015/08/23 02:13

編集2015/08/25 00:55
rik

総合スコア1151

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

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

D.O

2015/08/30 00:27

元のファイルはスペルミスじゃなかったんですが... とりあえず1から設定し直したら動きました。 何がいけなかったんだろう? とりあえずありがとうございました。
guest

0

jquery で要素をクリックするとアニメーションで移動する例がいくつも見つかります。
こういった例を参考にしてみては如何でしょうか?
一言で言えば、onclick で $(this).anomete( ...) とする javascript を書くことで実現できます。

参考例:

投稿2015/08/23 01:34

katoy

総合スコア22324

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

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

D.O

2015/08/30 00:27

コメントありがとうございます。 jQueryも勉強してみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問