[Laravel 6.x]Route::get()で設定したURLパラメーターの取得
Laravel6.xでRoute::get('/path/to/{id}')で設定したidの取得方法について。
HOME>WEBプログラム覚書>[jQuery]なるほど、わからん。.slideDown()
[jQuery]なるほど、わからん。.slideDown()
jQueryの.slideDown()のこの動き。
サンプル
実行結果
slideDown()
Javascript
- $(function(){
- $('#demo1 span').on('click', function(e){
- $('#demo1 .slide-content').animate({height: 'show'});
- });
- });
HTML
- <div id="demo1">
- <span class="cq-btn">slideDown()</span>
- <p class="slide-content" style="display: none;">
- ここは最初非表示<br />
- ここは最初非表示<br />
- ここは最初非表示<br />
- ここは最初非表示<br />
- ここは最初非表示<br />
- ここは最初非表示<br />
- ここは最初非表示<br />
- ここは最初非表示<br />
- ここは最初非表示<br />
- ここは最初非表示<br />
- ここは最初非表示<br />
- </p>
- <p class="slide-content-bottom" style="color: FFFFFF; background: #859900;">
- ここは表示
- </p>
- </div>
なめらかですよね。最新のzepto.jsのデフォルトにfxが入ってなかったので、ビルドするのも面倒だし この動きを自分で作ろうと思ったんですが、簡単にはできそうもありませんでしたw
このなめらかな動きを実現するためには表示開始前(非表示状態の時)に高さを取得する必要があるわけですが、 いかんせんdisplayがnoneの場合、取得できません。CSS3とかで何とかならないかと考えましたが、どうにも無理っぽい。 高さが決まってれば何とかなるんでしょうけど。
なのでjQueryはどうやってこれをやってるのか調べたところ、 どうやら非表示要素のコピーを見えないようにDOMに追加して高さを取得して削除しているようです。 最近のバージョンはソースが理解できなそうだったので1.0での話ですが。 そんな面倒なことやってるのかという感じです。
サンプルコード
上記コードをjQuery1.0のDOM追加後の削除部分をコメントアウトして実行。
jQuery1.0 371～385行目
- jQuery.swap( e, old, function() {
- if (jQuery.css(e,"display") != "none") {
- oHeight = e.offsetHeight;
- oWidth = e.offsetWidth;
- } else {
- e = $(e.cloneNode(true)).css({
- visibility: "hidden", position: "absolute", display: "block"
- }).prependTo("body")[0];
- oHeight = e.clientHeight;
- oWidth = e.clientWidth;
- console.log(document);
- //e.parentNode.removeChild(e);
- }
- });
確かに body 直下に
HTML
- <p class="slide-content" style="display: block; overflow: hidden; padding: 0px; border-width: 0px; visibility: hidden; position: absolute;">...</p>
が追加されてますね。visibility:hidden と position: absolute を指定することで DOMに存在しながら表示はされないという状態を作ってます。
これはあくまで1.0の対応なので現在どうなってるか気になる方は調査してみてください。
| 投稿日 | 2014年2月11日 04:18 |
|---|---|
| カテゴリ | JavaScript |
| タグ | jQuery |
| トラックバック URL | http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1353 |
コメント