Aide de JQuery: slidetoggle() ne fonctionne pas correctement

Question

J'essaie d'utiliser la fonctionnalité JQuery Slidetoggle, mais je ne peux pas l'utiliser correctement.
Le problème auquel je suis actuellement confronté est que mon div glisse vers le bas sur le clic de l'icône de l'image de la diapositive, mais après cela, soudainement la div de données (dans laquelle les données sont chargées) disparaît. Les moyens qui glissent vers le bas sont parfaits, mais div (dans lequel les données sont chargées, ici #divMain) n'est pas visible après cela.
Je veux obtenir un effet de glissement dans mon code, comme this a (S'il vous plaît voir le site Web Design curseur services Refonte):

Voici mon code:

HTML:

<div> 
    <div class="jquery_inner_mid"> 
      <div class="main_heading"> 
       <a href="#"> 
        <img src="features.jpg" alt="" title="" border="0" /></a> 
      </div> 

      <div class="plus_sign"> 
       <img id="imgFeaturesEx" src="images/plus.jpg" alt="" title="" border="0" /> 
       <img id="imgFeaturesCol" src="images/minus.jpg" alt="" title="" border="0" /></div> 
      <div class="toggle_container"> 
       <div id="divMain" > 
       </div> 
      </div> 
     </div> 
     <div class="jquery_inner_mid"> 
      <div class="main_heading"> 
       <img src="About.jpg" alt="" title="" /></div> 
      <div class="plus_sign"> 
       <img id="imgTechnoEx" src="images/plus.jpg" alt="" title="" border="0" /> 
       <img id="imgTechnoCol" src="images/minus.jpg" alt="" title="" border="0" /></div> 
      <div class="toggle_container"> 
       <div id="divTechnossus" > 
       </div> 
      </div> 
     </div> 
    </div> 

JQuery:

$(function() { 

     $('#imgFeaturesCol').hide(); 
     $('#imgTechnoCol').hide(); 

     $('#imgFeaturesEx').click(function() { 
      $.getJSON("/Visitor/GetFeatureInfo", null, function(strInfo) { 
       $('#divMain').html(strInfo).slideToggle("slow"); 
       LoadDiv(); 
      }); 
      $('#imgFeaturesEx').hide(); 
      $('#imgFeaturesCol').show(); 
     }); 
     $('#imgFeaturesCol').click(function() { 
      $('#divMain').html("").slideToggle("slow"); 
      $('#imgFeaturesCol').hide(); 
      $('#imgFeaturesEx').show(); 
     }); 

     $('#imgTechnoEx').click(function() { 
      $.getJSON("/Visitor/GetTechnossusInfo", null, function(strInfo) { 
       $('#divTechnossus').html(strInfo).slideToggle("slow"); 
      }); 
      $('#imgTechnoEx').hide(); 
      $('#imgTechnoCol').show(); 
     }); 
     $('#imgTechnoCol').click(function() { 
      $('#divTechnossus').html("").slideToggle("slow"); 
      $('#imgTechnoCol').hide(); 
      $('#imgTechnoEx').show(); 
     }); 


    })(); 

    function LoadDiv() { 
     $('#s4').cycle({ 
      speed: 200, 
      timeout: 0, 
      pager: '#nav' 
     }); 

    } 

Answer 1

quelques choses:

1. Le div doit avoir le style display: none au début. Sinon, les bascules feront le contraire de ce que vous avez l'intention de faire. Je voudrais utiliser slideDown pour afficher et slideUp pour masquer au lieu de slideToggle. Le basculement n'est utile que lorsque le même appel peut être masqué ou affiché.

2. L'appel html("") va immédiatement supprimer le contenu, avant l'animation glissante. Supprimez cet appel, ou le faire tourner après la diapositive comme ceci:

   $('#divMain').slideUp('slow', function() { 
       $(this).html(''); 
   });