النتائج 1 إلى 8 من 8

الموضوع: jQuery: ـ Selector وبعض المشاكل عندي معها ( مع جملة تكرار بـ setTimeout!)

  1. #1
    عضو نشيط
    تاريخ التسجيل
    Jan 2008
    المشاركات
    164

    [تم حلها!]jQuery: ـ Selector وبعض المشاكل عندي معها ( مع جملة تكرار بـ setTimeout!)



    السلام عليكم

    أتمنى أن أجد من يساعدني.
    البارحة جلست أتعلم 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 (
    0
                            $(
    "#news_block ul li:eq(" + (1) + ")").hide("fast");
                        
                        $(
    "#news_block ul li:eq(" ")").show("slow");
                        
                        if (
    newsCount
                            
    i++;
                        else 
                            
    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> 






    التعديل الأخير تم بواسطة عمر الدليمي ; 19-12-2008 الساعة 09:23 PM سبب آخر: حللت المشكلة بنفسي
    __________________
    مدونة شخصية: عمر الدليمي
    راسلني
    أنصح بإستخدام "أوبونتو"


  2. #2
    عضو نشيط
    تاريخ التسجيل
    Jan 2008
    المشاركات
    164


    أنا درست الجافاسكربت منذ مدة من موقع W3C. ربما نسيت بعضها لأنني لم أستخدمها كثيراً فأرجوا السماح أن قمت بخطأ فادح!





    __________________
    مدونة شخصية: عمر الدليمي
    راسلني
    أنصح بإستخدام "أوبونتو"

  3. #3
    عضو سوبر نشيط
    تاريخ التسجيل
    Aug 2007
    المشاركات
    674


    الشباب ان شاء الله يساعدونك





    __________________
    Professional Java?Script Programmer and Web Developer

  4. #4
    عضو نشيط
    تاريخ التسجيل
    Jan 2008
    المشاركات
    164


    الشباب ان شاء الله يساعدونك
    تسلم . بس ردك غريب!

    ------------------

    تم حل المشكلة! السبب كان خطأ إملائي أو بالأحرى bug!. لهذا أحب أن تبع اللغات مبدأ الإجبار على تعريف المتغير!

    الخطأ كان في إستدعاء دالة animator بينما المفروض أنني أستدعي animate!
    الكود بعد الحل. للفائد العامة:
    كود PHP:
                $(document).ready(function(){
                    
    newsCount = $("#news_block ul li").length;
                    $(
    "#news_block ul li").hide(0);
                    
                    function 
    animate(i){
                        if (
    0
                            
    hideId 1;
                        else 
                            
    hideId newsCount 1;
                        
                        $(
    "#news_block > ul > li:eq(" hideId ")").hide("normal");
                        
                        $(
    "#news_block ul li:eq(" ")").show("slow");
                        
                        if (
    < (newsCount 1)) 
                            
    i++;
                        else 
                            
    0;
                        
                        
    setTimeout(function(){
                            
    animate(i);
                        }, 
    2000);
                    }
                    
    animate(0);
                }); 






    __________________
    مدونة شخصية: عمر الدليمي
    راسلني
    أنصح بإستخدام "أوبونتو"

  5. #5
    عضو فعال جدا
    تاريخ التسجيل
    Aug 2007
    المشاركات
    3,929


    نصيحة أخي .. استخدم اضافة الـ Firebug في متصفح الـ Firefox
    خطأ مثل هذا .. ستقوم الاضافة بتنبيهك عنه بكل يسر

    https://addons.mozilla.org/en-US/firefox/addon/1843

    شاهد الصورة ..


    :1power:





    الصور المرفقة الصور المرفقة  
    __________________
    تحاور مع العاقل بعقل .. اما ان يقتنع او تقتنع
    وتحاور مع الجاهل بعقل .. اما يطقعش او تفرقش
    وتلك الفاظ لا معنى لها كذلك كلماته

  6. #6
    عضو فعال جدا
    تاريخ التسجيل
    Aug 2007
    المشاركات
    3,929


    ثاني نصيحة .. اجعل النصوص كلها مخفية أولا
    ثم بعد اكتمال تحميل محتويات الصفحة قم بتنفيذ العرض واحدة بعد الاخري





    __________________
    تحاور مع العاقل بعقل .. اما ان يقتنع او تقتنع
    وتحاور مع الجاهل بعقل .. اما يطقعش او تفرقش
    وتلك الفاظ لا معنى لها كذلك كلماته

  7. #7
    عضو سوبر نشيط
    تاريخ التسجيل
    Aug 2007
    المشاركات
    674


    تسلم . بس ردك غريب!
    انا دخلت فكرتـ المشكلة كبيرة
    كنتـ بدي اساعدكـ





    __________________
    Professional Java?Script Programmer and Web Developer

  8. #8
    عضو نشيط
    تاريخ التسجيل
    Jan 2008
    المشاركات
    164


    ثاني نصيحة .. اجعل النصوص كلها مخفية أولا
    ثم بعد اكتمال تحميل محتويات الصفحة قم بتنفيذ العرض واحدة بعد الاخري
    أنا وضعت النصوص ظاهر في حال المتصفح لا يقبل جافاسكربت .
    خطأ مثل هذا .. ستقوم الاضافة بتنبيهك عنه بكل يسر
    الإضافة عندي لكنني لم أستخدم كل ميزاتها . لم أفتح صفحة console :] يا عيب :P

    شكراً "سحاب أون لاين" ... يا ريت لو فيه إسم ....... أحب الأسماء البشرية :P


    انا دخلت فكرتـ المشكلة كبيرة
    كنتـ بدي اساعدكـ
    شكراً ... الله يخليك. لكن يمكن خطأ مني في التعبير في كتابة السؤال!





    التعديل الأخير تم بواسطة عمر الدليمي ; 20-12-2008 الساعة 10:39 PM
    __________________
    مدونة شخصية: عمر الدليمي
    راسلني
    أنصح بإستخدام "أوبونتو"





ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا|شقق للايجار في الكويت | بيوت للبيع في الكويت | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض