Справка JQuery: toggle () не работает должным образом

Question

Я пытаюсь использовать функцию переключения JQuery, но не могу использовать правильно. Вместо плавного скольжения вверх и вниз, он идет очень быстро, а не анимированно.
Я хочу добиться скользящего эффекта в своем коде, например , который есть у (см. «Веб-дизайн, слайдер« Редизайн услуг »):

Вот мой код:

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';
            });
  });

Редактировать: я также хочу оптимизировать этот код (потому что код не очень чистый + количество строк также может быть уменьшено). Я не знаю о правильных стандартах кодирования для 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'); intead из toggle();

Answer 3

Джейкоб Релкин дал вам хорошую альтернативу для вашего кода, я пользуюсь возможностью, чтобы дать зрителям этой темы некоторые правила перехода от кодирования javascript к кодированию jquery:

1 - заменить все document.getElementById('element') на $('element')

2 - для всех стилей CSS вы используете функцию $('element').css("name","value");

3 - для скрытия и отображения на одном элементе вы можете использовать функцию toggle или slideToggle и их эффекты (медленно, быстро ..)