Наведение взаимодействия на устройствах Touch / Mobile с помощью jQuery

Question

Я использую jquery для показа контента в ссылках для наведения, и когда щелкают те же ссылки, они прокручиваются вниз до соответствующего div, содержащего больше контента. Кажется, это хорошо работает на ноутбуках и настольных компьютерах.

У меня возникла проблема при переходе на мобильные или сенсорные устройства, так как функция зависания не работает. Что происходит, так это то, что при касании ссылки на мгновение отображается текст при наведении курсора, а затем происходит прокрутка вниз до элемента div. Можно ли отложить прокрутку вниз на 5 секунд, чтобы отобразился текст, а затем прокрутить вниз.

Или какое другое вспомогательное средство можно использовать только для сенсорных и мобильных устройств?

$(".o-c").click(function() {
  $('html, body').animate({
    scrollTop: $(".one").offset().top
  }, 2000);
});

$(".o-c").hover(function() {
  $('.home-o-c').show();
  $('.home-i-t').hide();
}, function() {
  $('.home-o-c').hide();
  $('.home-i-t').show();
});

$(".c-f").hover(function() {
  $('.home-c-f').show();
  $('.home-i-t').hide();
}, function() {
  $('.home-c-f').hide();
  $('.home-i-t').show();
});

$(".i-c").hover(function() {
  $('.home-i-c').show();
  $('.home-i-t').hide();
}, function() {
  $('.home-i-c').hide();
  $('.home-i-t').show();
});


$(".c-u").hover(function() {
  $('.home-c-u').show();
  $('.home-i-t').hide();
}, function() {
  $('.home-c-u').hide();
  $('.home-i-t').show();
});

.left {
  width: 50%;
  float: left;
  background: red;
  height: 100vh;
}

.right {
  width: 50%;
  float: right;
  background: green;
  height: 100vh;
}

.one {
  width: 100%;
  background: yellow;
  height: 100vh;
  display: block;
  clear: both;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="left">


  <ul class="pivot-nav">
    <li class="pivot-nav-item"><a class="o-c default-underline custom-scroll-link" href="#one" data-toggle="my-scrollspy-2">1</a></li>
    <li class="pivot-nav-item"><a class="c-f custom-scroll-link" href="#" data-toggle="my-scrollspy-2">2</a></li>
    <li class="pivot-nav-item"><a class="i-c custom-scroll-link" href="#" data-toggle="my-scrollspy-2">3</a></li>

  </ul>

</div>

<div class="right">

  <p class="home-i-t" style="display: block;">TEXT.</p>
  <p class="home-o-c" style="display: none;">TEXT More.</p>
  <p class="home-c-f" style="display: none;">2</p>
  <p class="home-i-c" style="display: none;">3</p>


</div>

<div class="one">
  Some more TEXT HERE
</div>

Answer 1

Можно ли отложить прокрутку вниз на 5 секунд, чтобы отобразился текст, а затем прокрутить вниз.

Да, это возможно.

Вам нужно выполнить только два шага:

1. Запретить поведение ссылки по умолчанию, используя preventDefault();
2. Установить время ожидания с помощью setTimeout();, после чего браузер ответит на запроснажмите ссылку

Рабочий пример:

const sectionLinks = document.querySelectorAll('.links li a');
const textParagraph = document.querySelector('.text p');

sectionLinks.forEach((sectionLink) => sectionLink.addEventListener('click', (e) => {
    
    // PREVENT THE DEFAULT LINK CLICK BEHAVIOUR
    e.preventDefault();

    // ADD THE TEXT
    textParagraph.textContent = 'You clicked the ' + e.target.textContent + '...';

    // DUPLICATE THE STANDARD LINK CLICK BEHAVIOUR (AFTER A TIMEOUT)
    setTimeout(() => {window.location.href = e.target.href}, 1000);

  }, false));

:root {
scroll-behavior: smooth;
}

body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 400px 400px 400px 400px;
color: rgb(255, 255, 255);
}

a {
color: rgb(255, 255, 255);
}

li {
line-height: 36px;
}

div {
padding: 12px 0;
}

h2, p {
padding-left: 12px;
}

.section {
grid-column: 1 / 3;
}

.links {
background-color: rgb(255, 0, 0);
}

.text {
background-color: rgb(0, 127, 0);
}

#section-a {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 0);
}

#section-b {
background-color: rgb(255, 127, 0);
}

#section-c {
background-color: rgb(0, 0, 191);
}

<div class="links">
<ul>
<li><a href="#section-a">Link to Section A</a></li>
<li><a href="#section-b">Link to Section B</a></li>
<li><a href="#section-c">Link to Section C</a></li>
</ul>
</div>
<div class="text"><p>Text Here...</p></div>
<div id="section-a" class="section"><h2>Section A</h2></div>
<div id="section-b" class="section"><h2>Section B</h2></div>
<div id="section-c" class="section"><h2>Section C</h2></div>