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功能和他们的影响（慢，快.. ）