私は流体レイアウトのサイトを構築しているので、Jqueryのサイズとアニメーションにパーセンテージを使用する必要があります。私が発見したように、問題はJqueryがパーセンテージを理解していないことです。ここに私が何をしているかの例があります：Jqueryのパーセンテージを操作する
ページ<body>は100％幅です。
<article>は、ページ本文の71％の幅です。
<hgroup>は再びページ幅の71％に拡大する、私は（唯一<hgroup>が表示されているように）<article>は、ページのロードに<hgroup>と同じ幅になりたい<article>
の33.2％の幅であります<hgroup>をクリックすると、残りのコンテンツは<article>に表示されます。同時に、<article>を<hgroup>の幅で左にスライドさせて、<hgroup>を隠しておきたいと思います。
このような計算方法はありますか、またはピクセルに頼らなければなりませんか？
を必要とするものは何でも効果それを整理しました。
$(document).ready(function() {
$('section').hide();
//Capture widths on page load
var bwidth = $('body').width();
var awidth = $('article').width();
var hgwidth = $('hgroup').width();
$('hgroup').width(hgwidth);
$('article').width(hgwidth);
$('hgroup').click(function(){
//Hide open article
var close = $('section:visible').parent();
$(close).children('section').hide().end().width(hgwidth);
$(close).removeClass('active').css('marginLeft', '+=' +hgwidth).detach().appendTo('body');
//Hide last Article
$('body article').last().hide();
//Show current
$(this).parent().addClass('active')
$('.active').animate({
width: awidth,
marginLeft: '-=' + hgwidth
},500);
$(this).next().delay(500).fadeIn(50);
$(this).css('box-shadow','0px 0px 8px #666');
//Show Next Hgroup
$(this).parent().nextAll('article:first').show();
});
});
あなたはスライド効果を探していると思います。 jquery UIのスライド効果http://docs.jquery.com/UI/Effects/Slideを見てください。それは多くのコーディングなしであなたを助けるかもしれません。
私が行っている効果は、3つの記事があるので、1つのスライドよりもアコーディオンの方が多いです。私の最大の問題は、私がスクリプトをどのようにしてパーセンテージの大きさにしたいのかを判断することです。私は後でその効果を釘付けにします。 –
さて、あなたは
article {
width: 23.6%;
/* that's 33.2% of 71% of 100 */
}
hgroup {
width: 100%;
/* that's in relation to article */
}
を定義することができますプラス何でもあなたが
必要位置決め
$('article').width($('body').width()/100 * 71);
$('hgroup').width($('article').width()/100 * 33.2);
プラス、あなたは多くの不満や嘆き、Iついに後
何らかの理由でjavascriptを使わずに誰かが見ていた場合に、articles/hgroupsを適切なサイズにしたかったのです。そうすれば、コンテンツは消えません。私はdocの準備をして幅の値をキャプチャし、スクリプト全体で使用できる変数として保存してしまいました。ありがとう、しかし、私は適切な幅にフォールバックする必要がない場合、これはうまくいったでしょう。 –
では、記事の幅を71％、CSSのhgroupの33.2％を設定できます。これはフォールバックになります。その後pageloadでそれぞれjqueryで23.6と100に設定し、上で説明したように再度71％と33.2％にクリックします。 – Zhenya
ああ、私はあなたが解決策を見つけたのを見る。気にしないで。 – Zhenya
問題が解決したら、[あなた自身の答えを受け入れる]（http://meta.stackexchange.com/questions/65363/can-i-answer-my-own-question）をしてください。 –