JQuery Help：toggle（）無法正常工作

Question

我試圖使用JQuery切換功能，但無法正確使用。它不是上下滑動，而是非常快速，而不是以動畫方式。
我要實現我的代碼的滑動效果，像this已經（請參閱網站設計，重新設計服務滑塊）：

這裏是我的代碼：

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() { 

      document.getElementById('imgFeaturesCol').style.display = 'none'; 
      document.getElementById('imgTechnoCol').style.display = 'none'; 


      $('#imgFeaturesEx').click(function() { 


       $.getJSON("/Visitor/GetFeatureInfo", null, function(strInfo) { 
        document.getElementById('divMain').innerHTML = strInfo; 
       }); 
       $("#divMain").toggle("slow"); 
       document.getElementById('imgFeaturesEx').style.display = 'none'; 
       document.getElementById('imgFeaturesCol').style.display = 'block'; 
      }); 
      $('#imgFeaturesCol').click(function() { 
       document.getElementById('divMain').innerHTML = ""; 
       $("#divMain").toggle("slow"); 
       document.getElementById('imgFeaturesCol').style.display = 'none'; 
       document.getElementById('imgFeaturesEx').style.display = 'block'; 
      }); 

      $('#imgTechnoEx').click(function() { 
       $.getJSON("/Visitor/GetTechnossusInfo", null, function(strInfo) { 
        document.getElementById('divTechnossus').innerHTML = strInfo; 
       }); 
       $("#divTechnossus").slideToggle("slow"); 
       document.getElementById('imgTechnoEx').style.display = 'none'; 
       document.getElementById('imgTechnoCol').style.display = 'block'; 
      }); 
      $('#imgTechnoCol').click(function() { 
       document.getElementById('divTechnossus').innerHTML = ""; 
       $("#divTechnossus").slideToggle("slow"); 
       document.getElementById('imgTechnoCol').style.display = 'none'; 
       document.getElementById('imgTechnoEx').style.display = 'block'; 
      }); 
    }); 

編輯：我也想優化這個代碼（因爲代碼不是很乾淨+行數也可能是r得出）。我不知道JQuery的正確編碼標準。我在JQuery中很新，所以請告訴我正確的路徑，以便我可以優化這個愚蠢的代碼。

Answer 1

我無法抗拒你的優化使用代碼jQuery。

我一直困惑不已，爲什麼你不得不在那裏所有的getElementById來電時，你已經包括jQuery的

是試試這個：

(function() { 
     $([ '#imgFeaturesCol', '#imgTechnoCol' ]).hide(); 

     $('#imgFeaturesEx').click(function() { 
      $.getJSON("/Visitor/GetFeatureInfo", null, function(strInfo) { 
       $('#divMain').html(strInfo) 
           .slideToggle("slow"); 
      }); 
      $('#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();    
     }); 
})(); 

Answer 2

使用slideToggle('slow');這一翻譯的toggle();

Answer 3

雅各布Relkin給你一個很好的選擇，你的代碼，我藉此機會給這個線程的觀衆一些規則，從javascript編碼到jquery編碼的通道：

1-replace all document.getElementById('element') by $('element')

2，所有的CSS樣式，您使用的功能$('element').css("name","value");

3爲隱藏，並顯示出相同的元素，你可以使用toggle或slideToggle功能和他們的影響（慢，快.. ）