0

Собственно вот код, почему работает некорректно? https://codepen.io/anon/pen/zLwaKg

function diplay_hide (blockId)
        { 
            if ($(blockId).css('display') == 'none') 
                { 
                    $(blockId).animate({height: 'show'}, 500);
                } 
            else 
                {     
                    $(blockId).animate({height: 'hide'}, 500);
                }

          } 
<div class="container">
        <div class="left-side">
            <div class="i-1" onmouseover="diplay_hide('.t-1');return false;"><p><i class="far fa-heart fa-2x"></i>Heading title one</p></div>
            <div class="i-2" onmouseover="diplay_hide('.t-2');return false;"><p><i class="fas fa-briefcase fa-2x"></i>Heading title one</p></div>
            <div class="i-3" onmouseover="diplay_hide('.t-3');return false;"><p><i class="fas fa-leaf fa-2x"></i>Heading title one</p></div>
            <div class="i-4" onmouseover="diplay_hide('.t-4');return false;"><p><i class="fas fa-mobile-alt fa-2x"></i></i>Heading title one</p></div>
            <div class="i-5" onmouseover="diplay_hide('.t-5');return false;"><p><i class="fas fa-umbrella fa-2x"></i>Heading title one</p></div>
        </div>
        <div class="right-side">
            <div class="t-1" style="display: none;">
                <img src="" alt="">
                <h2>Heading Feature title goes here</h2>
                <p>Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.</p>
            </div>
            <div class="t-2" style="display: none;">
                <img src="" alt="">
                <h2>Heading Feature title goes here2</h2>
                <p>Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.</p>
            </div>
            <div class="t-3" style="display: none;">
                <img src="" alt="">
                <h2>Heading Feature title goes here3</h2>
                <p>Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.</p>
            </div>
            <div class="t-4" style="display: none;">
                <img src="" alt="">
                <h2>Heading Feature title goes here4</h2>
                <p>Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.</p>
            </div>
            <div class="t-5" style="display: none;">
                <img src="" alt="">
                <h2>Heading Feature title goes here5</h2>
                <p>Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.</p>
            </div>
        </div>
    </div>

1 ответ 1

0

В твоем примере не подключена либа(jquery), которой ты пытаешься скрыть целевые элементы.

Uncaught ReferenceError: $ is not defined
at diplay_hide (index.html:53)
at HTMLDivElement.onmouseover (index.html:67)
1
  • Я подключил вверху страницы, оно все равно криво работает, особенно когда я 1 раз прошелся по элементам и иду в обратном порядке, начинается каша.
    – Ivan
    24 июл 2018 в 12:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.