تأثير الشريحة مع jQuery

Question

أرغب في إنشاء تأثير شريحة باستخدام jQuery. لدي العديد من Div:

<div id='div_1'>content currently displayed</div>
<div id='div_2' style="display:none">content to be loaded</div>
<div id='div_3' style="display:none">content to be loaded</div>

الفكرة هي أن DIV_2 يظهر أثناء الانزلاق و "دفع" Div_1 بعيدًا عن الأنظار ، مثل تمرير نافذة (أفقي أو رأسي). أعتقد أنه لا يمكنني استخدام التمرير الفعلي لأن محتوى DIVS يتم تحميله عبر Ajax ، لذلك لا يمكنني وضعه على وجه التحديد قبل تحميله.

اي فكرة؟

تيا

جريج

Answer 1

جريج ، يبدو أنك تبحث عن شيء مثلما فعلت هنا:

http://jsfiddle.net/2e5qv/

إذا كان الأمر كذلك ، فإن ما تريد القيام به هو احتواء كل هؤلاء <div>S داخل أحد الوالدين ، ثم عندما تريد تحريكه ، تحريك الجزء العلوي من كل div أعلى العدد الصحيح من وحدات البكسل. الحل الذي قدمته أعلاه لديه كل منهما <div> مجموعة أكثر أو أقل على ارتفاع ثابت قدره 20 بكسل (عبر line-height).

الاباء <div> يعمل كنوع من النافذة لإظهار المحتوى الحالي فقط.

Answer 2

تقصد مثل هذا:

$('#div_2').slideDown('slow', function(){
  $('#div_1').slideUp('slow');
});

انظر العرض التوضيحي هنا.

Answer 3

أخذت ما قدمه سارفراز وعدلته قليلاً بناءً على ما أعتقد أنك تبحث عنه. من أجل العرض التوضيحي ، قمت أيضًا بإطلاق النار على حدث النقر. يمكنك العثور على مثال العمل هنا: http://jsbin.com/emowu3/3

$('#div_1').click(function(){
    $('#div_1').slideUp('slow');
    $('#div_2').slideDown('slow');
});
$('#div_2').click(function(){
    $('#div_2').slideUp('slow');
    $('#div_3').slideDown('slow');
});
$('#div_3').click(function(){
    $('#div_3').slideUp('slow');
    $('#div_1').slideDown('slow');
});