Jquery تحريك إخفاء وإظهار

Question

أرغب في حدوث شيئين في وقت واحد عندما أنقر على الرابط.أنا أتصفح وثائق Jquery ببطء، لكن لم أتعلم بعد ما أحتاج إليه.

هنا رابط لبلدي موقع

عندما أقوم بالنقر على رابط الخدمات، أرغب في ذلك #slideshow div للإخفاء، وقسم جديد ليحل محله.

لقد حاولت فقط جعل عرض الشرائح متحركًا عند النقر فوق رابط الخدمات، ولكنه إما يقوم بوظيفة الرسوم المتحركة أو ينتقل إلى صفحة html المرتبطة، وليس كليهما.كيف سأحقق كلا الأمرين.

لا يهم إذا قمت فقط بإخفاء وإظهار divs في نفس الصفحة، أو إذا انتقلت إلى صفحة html جديدة.أريد فقط الحصول على وظيفة الرسوم المتحركة وتغيير المحتوى أثناء إخفاء واحدة.

هذا هو رمز jquery الذي أستخدمه

$(document).ready(function(){   
  $("a.home").toggle(
    function(){
      $("#slideshow").animate({ height: 'hide', opacity: 'hide' }, 'slow');   
    },
    function(){
      $("#slideshow").animate({ height: 'show', opacity: 'show' }, 'slow');   
    }
  );
});

$(document).ready(function(){   
  $("a.services").toggle(
    function(){
      $("#slideshow2").animate({ height: 'show', opacity: 'show' }, 'slow');
    },
    function(){
      $("#slideshow2").animate({ height: 'hide', opacity: 'hide' }, 'slow');
    }
  );
});

الصفحة الرئيسية والخدمات هما الرابطان، وأود الخدمات عند النقر عليها لإخفاء #slideshow div, ، وإظهار slideshow2 div, ، والتي سيتم إخفاؤها ثم استبدال الأولى.

يوجد قدر لا بأس به من html لذا قد يكون من الأسهل عرض المصدر الخاص بي من الرابط.

Answer 1

محدث:تم تحديث هذا الحل بعد سؤال المتابعة في التعليقات.

يجب عليك استخدام طريقة رد الاتصال طرق الإظهار/الإخفاء.

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

  /* Hide First Div */
  $("#div1").hide("slow", function(){
    /* Replace First Div */
    $(this).replaceWith("<div>New Div!</div>");
  });

  /* Hide Second Div */
  $("#div2").hide("slow", function(){
    /* Replace Second Div */
    $(this).replaceWith("<div>New Div!</div>");
  });

  /* If you wanted to sequence these events, and only
     hide/replace the second once the first has finished,
     you would take the second hide/replace code-block 
     and run it within the callback method of the first
     hide/replace codeblock. */

});

طريقة رد الاتصال هي المعلمة الثانية لوظائف .show/.hide.يتم تشغيله عند اكتمال طريقة .show/.hide.لذلك، يمكنك إغلاق/فتح الصندوق الخاص بك، ومن خلال طريقة رد الاتصال، قم بتشغيل حدث بعد ذلك مباشرة.