jquery：mouseover load state

Question

マウスオーバー時にフル高さに拡大され、マウスが離れるときに収縮する、固定された小さな高さの要素が必要です。以下のようなものをやって

：

$(".element").each(function() { 
    $.data(this, 'size', { width: $(this).width(), height: $(this).height() }); 
}).hover(function() { 
    $(this).stop().animate({ height: $.data(this,'size').height, 
          width: $.data(this,'size').width }); 
}, function() { 
    $(this).stop().animate({ height: 40, 
          width: $.data(this,'size').width }); 
}); 

...動作しますが、ページ上の要素は完全な高さで始まり、ロードします。

ページの読み込み時に縮小する最も良い方法は何ですか？

Answer 1

このように試してください、それは理解することをお勧めします。フィドルの例を確認してください。このように、あなたも.....背景色を変更するような他のアニメーション効果を追加することができます

CSS：

.div_small_height{ 
height : 20px; 
width : 500px; 
background-color : red; 
overflow : hidden; 
} 
.div_full_height{ 
    width : 500px; 
    background-color : blue; 
} 

のjQuery：

$(".element").addClass('div_small_height'); // shrink it on page load 
// change on mouseenter and mouse leave 
$(".element").hover(function(){ 
    $(this).switchClass("div_small_height","div_full_height",500); 
},function(){ 
    $(this).switchClass("div_full_height","div_small_height",500); 
}); 

フィドル例：http://jsfiddle.net/7PV98/

Answer 2

ページロード後にホバーアウトcを呼び出すことで縮小できます文書が準備ができたらodeします。アニメーション化してレンダリングされた場合に見栄えを良くすることができます。または、高さを直接設定したい場合もあります。

$(document).ready(function() { 
    $('element').each(function() { 
     //store height and width 
     $.data(this, 'size', { width: $(this).width(), height: $(this).height() }); 
     //shrink it 
     $(this).animate({ height: 40, width: $.data(this,'size').width }); 
    }); 
}); 

負荷をかけてもアニメーションを行わずにこれを行う方法があるかどうか不思議です。

Answer 3

あなたは、各要素の高さが事前に分かっていないと言ってきました。だからあなたの問題の1つは、ロード時に各要素の自然な高さをキャプチャする方法ですが、それが固定された折りたたみサイズに収縮した後にその要素を表示する方法を見つけます（フルサイズで各要素を簡単に表示しないでください） 。

可能な方法の1つは、オブジェクトを自然なサイズでレンダリングすることですが、ビューポートの外側には-1000ピクセルの水平方向にシフトします。ディメンションをキャプチャして保存し、固定された40ピクセルの高さに縮小してから、最後にビューポートの通常の位置に戻します。すべてのオブジェクトが何らかの種類のコンテナ要素に含まれている場合は、その要素を単に移動できます。