javascript - 在 jQuery 中几秒后显示和隐藏 div

标签 javascript jquery html css

我有一些链接，当我将鼠标悬停在上面时会显示与该链接相关的特定文本。我使用悬停功能来显示和隐藏 div。

我还想添加这样的功能，即文本会在几秒钟后自动更改以显示下一个 div 的内容。即循环通过 div。隐藏 div 1、显示 div 2、隐藏 2、显示 div 3 等。下面是显示悬停功能如何工作的代码。将鼠标悬停在右侧的链接上，左侧的文字会发生变化:

$(".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-fill {
  background: #0000006b;
  height: 100vh;
}

.right-fill {
  background: pink;
  height: 100vh;
}

.vc_col-sm-6 {
  width: 50%;
  float: left;
}

.pivot-nav {
  list-style: none;
  font-family: 'Montserrat';
  text-align: left;
}

.pivot-nav li a {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  color: #fff;
  text-decoration: none;
  line-height: 40px;
}

.pivot-nav li a.default-underline::after,
.pivot-nav li a:hover::after {
  width: 100%;
}

.pivot-nav:hover a.default-underline:not(:hover)::after {
  width: 0;
}

.pivot-nav li a::after {
  bottom: 0;
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s;
  width: 0;
}

.home-o-c,
.home-c-f,
.home-i-c,
.home-c-u {
  display: none;
}

.our-company {
  clear: both;
  display: block;
  height: 50vh;
}

.cf2 {
  clear: both;
  display: block;
  height: 50vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>

  <div class="left-fill text-left wpb_column vc_column_container vc_col-sm-6">

    <div class="wpb_wrapper">
      <p class="home-i-t">TEXT One</p>
      <p class="home-o-c">TEXT One</p>
      <p class="home-c-f">TExt for C f.</p>
      <p class="home-i-c">Some more text fo i c.</p>
      <p class="home-c-u">Get in touch </p>

    </div>
  </div>



  <div class="home-fill right-fill text-right wpb_column vc_column_container vc_col-sm-6">

    <div class="wpb_wrapper">
      <ul class="pivot-nav">
        <li class="pivot-nav-item"><a class="o-c default-underline" href="#" data-toggle="my-scrollspy-2">O C</a></li>
        <li class="pivot-nav-item"><a class="c-f" href="#" data-toggle="my-scrollspy-2">C F</a></li>
        <li class="pivot-nav-item"><a class="i-c" href="#" data-toggle="my-scrollspy-2">I C</a></li>
        <li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a class="c-u" href="#">C U</a></li>
      </ul>

    </div>
  </div>



</body>

最佳答案

你可以这样做:

var homeLinks = ['i-t', 'o-c', 'c-f', 'i-c', 'c-u'];
var currentLink = 0;
var hovered = false;

$(".home-link").hover(function() {
  hovered = true;
  $('.home-'+homeLinks[currentLink]).hide();
  $('[data-hover='+homeLinks[currentLink]+']').toggleClass('default-underline');
  currentLink = homeLinks.indexOf($(this).attr('data-hover'));
  $('[data-hover='+homeLinks[currentLink]+']').toggleClass('default-underline');
  $('.home-'+homeLinks[currentLink]).show();
}, function() {
  hovered = false;
});

var autoNavInterval = setInterval(autoNav, 1000);

function autoNav() {
  if(hovered === false){
    $('.home-'+homeLinks[currentLink]).hide();
    $('[data-hover='+homeLinks[currentLink]+']').toggleClass('default-underline');
    currentLink++;
    if(currentLink >= homeLinks.length){ currentLink = 0; }
    $('[data-hover='+homeLinks[currentLink]+']').toggleClass('default-underline');
    $('.home-'+homeLinks[currentLink]).show();
  }
}
.left-fill {
  background: #0000006b;
  height: 100vh;
}

.right-fill {
  background: pink;
  height: 100vh;
}

.vc_col-sm-6 {
  width: 50%;
  float: left;
}

.pivot-nav {
  list-style: none;
  font-family: 'Montserrat';
  text-align: left;
}

.pivot-nav li a {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  color: #fff;
  text-decoration: none;
  line-height: 40px;
}

.pivot-nav li a.default-underline::after,
.pivot-nav li a:hover::after {
  width: 100%;
}

.pivot-nav:hover a.default-underline:not(:hover)::after {
  width: 0;
}

.pivot-nav li a::after {
  bottom: 0;
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s;
  width: 0;
}

.home-o-c,
.home-c-f,
.home-i-c,
.home-c-u {
  display: none;
}

.our-company {
  clear: both;
  display: block;
  height: 50vh;
}

.cf2 {
  clear: both;
  display: block;
  height: 50vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left-fill text-left wpb_column vc_column_container vc_col-sm-6">

    <div class="wpb_wrapper">
      <p class="home-i-t">TEXT One</p>
      <p class="home-o-c">TEXT One</p>
      <p class="home-c-f">TExt for C f.</p>
      <p class="home-i-c">Some more text fo i c.</p>
      <p class="home-c-u">Get in touch </p>

    </div>
  </div>



  <div class="home-fill right-fill text-right wpb_column vc_column_container vc_col-sm-6">

    <div class="wpb_wrapper">
      <ul class="pivot-nav">
        <li class="pivot-nav-item"><a data-hover="o-c" class="home-link" href="#" data-toggle="my-scrollspy-2">O C</a></li>
        <li class="pivot-nav-item"><a data-hover="c-f" class="home-link" href="#" data-toggle="my-scrollspy-2">C F</a></li>
        <li class="pivot-nav-item"><a data-hover="i-c" class="home-link" href="#" data-toggle="my-scrollspy-2">I C</a></li>
        <li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a data-hover="c-u" class="home-link" href="#">C U</a></li>
      </ul>

    </div>
  </div>

请注意，我在您的链接中添加了一个 data-hover 属性和一个 .home-link，这样可以简化脚本...我使用了 setInterval自动显示功能，每 1 秒一次，但您可能想将其更改为更长的时间，我创建了 hovered var 作为标志以了解鼠标当前是否在链接上，并防止悬停链接时更改显示文本的自动导航。

关于javascript - 在 jQuery 中几秒后显示和隐藏 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58603420/

上一篇：python - 有没有办法在作为表格的模板变量内执行 html？

下一篇：html - 如何以水平方式而不是垂直方式显示引导导航栏的下拉菜单项？

相关文章：

php - 在回调函数中处理数据，jquery 的 .get 不起作用

javascript - 如何从多个元素中获取值

javascript - 使用 jQuery 同时向下滑动 div 和 .fadeIn() 内容，反之亦然？

html - 无法将我的 html 输入区域居中

javascript - AngularJS 无法显示身份验证状态

javascript - 仅当第二个 div 在 View 中时才在滚动时保持 div 可见

javascript - 如何在 i18n-js 中使用 setLocale？

javascript - angular.injector( ['moduleName' ]).get ('name' ) 适用于工厂，不适用于服务

javascript - Yepnope & Modernizr screen.width 条件

jquery - Chrome 误读最大高度和最大宽度

©2024 IT工具网  联系我们