问题：

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

华涵意

2023-03-14

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

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

null

$(".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>

null

共有1个答案

景阳曜

2023-03-14

你可以这样做：

null

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>

类似资料：

几秒钟后隐藏div

问题内容：我想知道，几秒钟后如何在jquery中隐藏div？例如Gmail的邮件。我已经尽力了，但是无法正常工作。问题答案：这将在1秒（1000毫秒）后隐藏div。如果您只想隐藏而不褪色，请使用。
几秒钟后自动隐藏对话框

我读过很多关于如何在几秒钟后以多种方式隐藏对话框的答案。然而，我不能得到这个工作与我的例子。我正在使用一个opencart插件，当你在购物车中添加一个产品后会显示一个DIV，但它会一直保持在那里，只有当用户点击“继续购物”时才会关闭。我希望这个DIV在5秒后自动关闭。我已经尝试setTimeout，延迟等，没有工作......所以我不确定我做错了什么：代码是这样的：有人能帮我吗？编辑：
用jQuery在n秒后阻止“显示然后隐藏”

乍一看，我试图做一些相当简单的事情，但我做不到。我有一个按钮和两个隐藏的div。按下按钮时，我希望第一个div显示，n秒后隐藏，然后第二个div显示。 HTML：包含JS的完整代码如下所示：https://jsfiddle.net/439xbfe5/ 我已经在这里检查了答案：jQuery显示5秒钟，然后隐藏这个代码的问题是#div2在#div1消失之前出现：同样的问题：我还尝试创建一个阻塞
jQuery 隐藏/显示

主要内容：实例,jQuery hide() 和 show(),实例,实例,实例,jQuery toggle(),实例隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！因为时间是宝贵的，我们提供快捷方便的学习方法。在小牛知识库,你可以学习需要的知识。实例 jQuery hide() 简单的jQuery hide()方法演示。 jQuery hide() 另一个hide()实例。演示如何隐藏文本。 jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和
间隔几秒钟后显示相同的活动

我开发了一个Android应用程序，一旦滑块完成显示MainActivity，它就会有闪屏，但在我的情况下，一旦显示MainActivity，它会在几秒钟（大约5秒）后自动重新加载（就像MainActivity第一次打开时一样打开）。这是我的SplashScreenActivity 飞溅屏幕适配器主要活动仅从这个活动中，我调用了FunctionsActivity（MainActivity）。
jQuery控制TR显示隐藏的几种方法

本文向大家介绍jQuery控制TR显示隐藏的几种方法，包括了jQuery控制TR显示隐藏的几种方法的使用技巧和注意事项，需要的朋友参考一下网上有很多，这里介绍三种：第一种方法，就是使用id，这个方法可以在生成html的时候动态设置tr的id，也是用得最多最简单的一种，如下：那么控制显隐可以直接使用第二种方法，是使用$.each()，这个方法需要设置table的id，如下：那么控制显隐可以

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

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档