メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

【jQuery】animateメソッド

jQuery11
アニメーションを導入する機会があんまりないので、
こういうの全然知らないんですけど、使い易いので、
CSSが分かってデザインが上手にできる人なら、
割と早いこと使いこなすことができそうな気がしました。

animateメソッドについて

CSSの値を変化させて、htmlオブジェクトをなんかしら変化させるメソッドです。
実際の動作としては、htmlのstyle属性の中のプロパティの値が変化していきます。

例えば、top:100とかやると指定したdurationに合わせて上から100px移動するようになります。
注意点は、CSSのプロパティをキャメルケースで記述しなければいけない点です。

キャメルケースはrakudaCamelCamelsみたいな形でらくだのこぶみたいに見えるように書く書き方です。

htmlを動かす

適当にdiv作ってidを入れて、jQueryでDOM取得して
animateメソッドを使います。


jQuery('#hoge').animate({
     
     marginLeft: 100,
     opacity: 0.6

},1000);

第一引数に、CSSのプロパティとその値を渡します。
第二引数にどの間隔でアニメーションを行うかを指定します。
slow,normal,fastとかでも指定できた気がします。
これで左に100px移動します。(ぼ、ぼくのブラウザではね!)

marginでやるよりもpositionでやってる例をよく見かけます。
positionでやる場合はこんな感じで書いたらいいと思います。

jQuery('#hoge').animate({

     left: 100,
},1000);

htmlを2回動かしたい場合

第三引数には、アニメーションタイプ(easing)、第四引数には
コールバック関数を定義することができます。

第二引数の時間間隔と第三引数のアニメーションタイプは初期値指定しなくても
動いてくれるますが、時間間隔は指定しておいた方がいいと思います。


                    jQuery('#box2').click(function(){

                         jQuery('#box2').animate({
                              left: 200,
                         }, 1000, function(){
                              jQuery('#box2').animate({
                                   top: 300,
                                   opacity: 0
                              },1000,function(){
                                   jQuery('#box2').css({top: 123, left: 0, opacity: 1});
                              });
                         });

                    });


今回はコールバック関数にもう一個動きをつけてみました。
これを見て思って欲しいのが、animateメソッドのコールバック関数の中で
HTMLオブジェクトを呼び出せば、もう一回animateメソッドが使えるということです。

*多分もっと良い書き方あると思うのですが、書く前に見た記事でも
aniamteメソッドを別に読んでいたので僕はコールバック関数の中でも同じことやれば
同じ事ができるよってことを書いておきます。かっこいい書き方教えてください。

アニメーションタイプを指定する

jQueryを素のまま使った場合、指定できるアニメーションタイプは2種類です。
LinerとSwingのみとなっております。

ただ、プラグインを導入する事により使える種類が大幅に増えるので、
かっこうよくしたい場合は導入してみるといいと思います。

ヌーの中に、動き方の一覧があるので参考にしてください。(もしかしたら今はこのサンプルよりも沢山あるかもしれません。)

*linerとかswingとか書いてあるところらへんをクリックするとサンプルが動きます。


                    jQuery('#box3').animate({
                         width: 'toggle',
                    },{duration: 2000,easing: 'swing',});

                    jQuery('#box4').animate({
                         width: 'toggle',
                    },{duration: 2000,easing: 'linear',});


比較用にswingとlinearのコードを貼っておきます。
widthでtoggleとか、パターン指定した場合とかしかeasingは使えないのかもしれません。
positionとか移動した場合にeasing指定しても何も起こりませんでした・・・。
また分かったら訂正します。

参考

easingのサンプル
jQuery の animate の動作パターンを指定する方法
キャメルケース
偏見プログラマの語り!

関連記事

コメントをお待ちしております