السلام عليكم
أتمنى أن أجد من يساعدني.
البارحة جلست أتعلم jQuery! المهم كانت أسهل مما توقعت خصوصاً مع إستخدام Aptana IDE حيث تساعدني كثيراً في إكمال الكود.
المهم بعد الإطلاع على الأساسيات وقراءة أول خمس دروس في موقعهم بدأت أول تجربة لي:
- لدي قائمة فيها أخبار (ul li) يحويها div معرفه news_block بدلاً من عرض القائمة الطبيعي قررت أن أضيف لها بعض الحركات.
أول ما فعلت هو أخفي عناصر القائمة li كلهم عندما document ready . ثم آخذهم واحداً واحداً أظهر الأول ثم أنتظر 4 ثواني لأخفيه وأظهر الثاني بواسطة hide fast وshow slow
أخر فقرة يتوجب علي فعلها بواسطة loop أي كانت. وتتأخر بين كل دورة ودورة 4 ثوان.
هذا ما فعلتها ولم أنجح!
شكراً لمن يريد المساعدة:
هذا كود الجافاسكربت jQuery:
كود PHP:$(document).ready(function(){
newsCount = $("#news_block ul li").length;
$("#news_block ul li").hide(0);
$("#news_block ul li:eq(1)").show("slow");
integer = 0;
function animate(i){
if (i > 0)
$("#news_block ul li:eq(" + (i - 1) + ")").hide("fast");
$("#news_block ul li:eq(" + i + ")").show("slow");
if (i < newsCount)
i++;
else
i = 0;
animator = setTimeout(function(){
animator(i);
}, 1000);
}
animate(0);
});
ملاحظات على محاولاتي الأخرى:
* حاولت إستخدام each لكن فشلت في وضع مدة زمنية فاصلة!
مصدر الصفحة كاملاً (لا تنسى تغيير مسار jQuery):
كود PHP:<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jQuery test of Omar :)</title>
<script type="text/javascript" src="lib/jquery/jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
newsCount = $("#news_block ul li").length;
$("#news_block ul li").hide(0);
$("#news_block ul li:eq(1)").show("slow");
integer = 0;
function animate(i){
if (i > 0)
$("#news_block ul li:eq(" + (i - 1) + ")").hide("fast");
$("#news_block ul li:eq(" + i + ")").show("slow");
if (i < newsCount)
i++;
else
i = 0;
animator = setTimeout(function(){
animator(i);
}, 1000);
}
animate(0);
});
</script>
</head>
<body>
<div id="news_block" class="c_blocks">
<h4>عينة أخبار</h4>
<ul>
<li>
علماء يستعيدون الصور التي نظر اليها الانسان بمسح للمخ
</li>
<li>
التعاقد رسميا مع شركة الطيدار لرعاية أجهزة الروبوت
</li>
<li>
بحث قضايا الطلبة العرب الدارسين فـي (التكنولوجيا)
</li>
<li>
اكتشاف أكبر خلل في المجال المغناطيسي لكوكب الأرض
</li>
</ul>
</div>
</body>
</html>
رد مع اقتباس
. بس ردك غريب!
. بس ردك غريب!
.