يتلاشى تأثير معرض jQuery وAjax ويتلاشى عند نقرات الإبهام!

Question

بحاجة الى بعض المساعدة، من فضلك.

لدي سطر من الصور المصغرة الأفقية التي تم تحميلها كصورة واحدة مع صور مصغرة مختلفة تمت الإشارة إليها عبر خريطة الصورة على هذا النحو:

<div id="zoom">
    <img src="" />
</div>
<div id="collectionindex">
    <img src="thumbnail-strip.jpg" alt="" usemap="#Map" />
        <map name="Map" id="Map">
            <area shape="rect" coords="151,0,211,39" href="image1.jpg" alt="" />
            <area shape="rect" coords="215,0,275,39" href="image2.jpg" alt="" />
            <area shape="rect" coords="279,0,339,39" href="image3.jpg" alt="" />
            <area shape="rect" coords="343,0,403,39" href="image4.jpg" alt="" />
            <area shape="rect" coords="407,1,467,40" href="image5.jpg" alt="" />
            <area shape="rect" coords="471,0,531,39" href="image6.jpg" alt="" />
        </map>
</div>

علامة IMG الموجودة في div مع id = "zoom" هي نافذة تكبير AJAX الخاصة بي عندما يقوم المستخدمون "بالنقر" على الصور المصغرة لعرض النسخة الأكبر من الصورة.

هذا هو رمز jQuery الذي يجب أن أتلاشى في الإصدارات الكبيرة من الصور المصغرة في مربع ZOOM.

<script type="text/javascript">
$(document).ready(function(){

$("area").click(function(){

        var largePath = $(this).attr("href");

        $("#zoom img").attr({ src: largePath }).fadeIn("slow"); return false;
            });
    });
</script>

في الوقت الحالي، يتلاشى jQuery فقط عند النقر على الصورة المصغرة لأول مرة، والباقي يظهر ببساطة عند النقر، ولا يتلاشى.أود أن يعمل الأمر بهذه الطريقة:

• ينقر المستخدم على الصورة المصغرة
• صورة كبيرة تتلاشى في مربع التكبير
• ينقر المستخدم على صورة مصغرة أخرى
• الصورة الأولى تتلاشى والصورة المصغرة الثانية المحددة تتلاشى للداخل
• إلخ.

آمل أن أوضح ذلك بوضوح.:) أي مساعدة سيكون موضع تقدير هائل.

Answer 1

تحتاج فقط إلى تلاشي الصورة قبل تغيير المسار وتلاشيها للداخل...لذلك يجب أن تصبح وظيفة النقر الخاصة بك:

يحرر:نسيت أن عرض/إخفاء الرسوم المتحركة حدث بشكل غير متزامن، لذلك تحتاج إلى استخدام رد اتصال عند التلاشي لتشغيل الباقي...يجب أن يكون الرمز:

<script type="text/javascript">
$(document).ready(function(){
    $("area").click(function(){
        var largePath = $(this).attr("href");
        $("#zoom img").fadeOut("slow", function() {
            $(this).attr({ src: largePath }).fadeIn("slow");
        });
        return false;
    });
});
</script>

Answer 2

أنا جديد هنا ورأيت للتو أن تعليقي على ردك كان أسلوبًا سيئًا للغاية.:ص

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

أنا في حاجة إليها ل:

• تتلاشى في الصورة الأولى بعد أن يختار المستخدم
• يقوم المستخدم باختيار الصورة التالية > FADE OUT الصورة الأولى > FADE IN الصورة التالية
• وهلم جرا وهلم جرا.