تأثير الشريحة مع jQuery
-
29-09-2019 - |
سؤال
أرغب في إنشاء تأثير شريحة باستخدام 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 ، لذلك لا يمكنني وضعه على وجه التحديد قبل تحميله.
اي فكرة؟
تيا
جريج
المحلول
جريج ، يبدو أنك تبحث عن شيء مثلما فعلت هنا:
إذا كان الأمر كذلك ، فإن ما تريد القيام به هو احتواء كل هؤلاء <div>
S داخل أحد الوالدين ، ثم عندما تريد تحريكه ، تحريك الجزء العلوي من كل div أعلى العدد الصحيح من وحدات البكسل. الحل الذي قدمته أعلاه لديه كل منهما <div>
مجموعة أكثر أو أقل على ارتفاع ثابت قدره 20 بكسل (عبر line-height
).
الاباء <div>
يعمل كنوع من النافذة لإظهار المحتوى الحالي فقط.
نصائح أخرى
تقصد مثل هذا:
$('#div_2').slideDown('slow', function(){
$('#div_1').slideUp('slow');
});
أخذت ما قدمه سارفراز وعدلته قليلاً بناءً على ما أعتقد أنك تبحث عنه. من أجل العرض التوضيحي ، قمت أيضًا بإطلاق النار على حدث النقر. يمكنك العثور على مثال العمل هنا: 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');
});