我具有要在动画中悬停显示和隐藏的这些内容块。

首先,我有一个默认的内容元素。 如果列表中没有元素悬停,那将被打消。 当元素列表中的元素被悬停时,我想查找相应的内容元素并将其显示出来。

我做了一个显示我的问题的jsfiddle。 如果您可以通过动画帮助我做到这一点,那就太好了。 谢谢!

有人可以在这里提供帮助吗?

jsfiddle.net/xf1b0g9a/2/

#1楼 票数:1 已采纳

您可以尝试使用一些内置方法,例如.fadeIn(), .slideDown()等。

 $(function() { //hover $('a').on('mouseover', switchContent); $('ul').on('mouseout', function(){ $(".content").hide(); $('.content.default').show(); }); function switchContent(event) { var id = $(event.currentTarget).attr('data-id'); $(".content").hide(); $(".content#" + id).fadeIn(); // use fadeIn() to see a fade effect. } }); 
 ul{border:solid 1px red;} .content{display:none;} .content.default{display:block;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <a data-id="1" href="#">1</a> </li> <li> <a data-id="2" href="#">2</a> </li> <li> <a data-id="3" href="#">3</a> </li> </ul> <div class="content default"> <h4>default.(show if no element is hovered, hide if other element is hovered)</h4> <p>default text</p> </div> <div class="content" id="1"> <h4>1</h4> <p>1</p> </div> <div class="content" id="2"> <h4>2</h4> <p>2</p> </div> <div class="content" id="3"> <h4>3</h4> <p>3</p> </div> 

*: 我稍微更改了标记。

#2楼 票数:0

代替display属性,使用visibility属性并将opacity设置为0。然后使用jquery的animate功能将opacity设置为1

$(".content#"+id).animate({'opacity' : 1});

  ask by user2952238 translate from so

未解决问题?本站智能推荐:

2回复

使用javascript在鼠标悬停时停止动画

我有一个div,其中某些控件是从数据库获取数据后动态添加的。 它有点新闻细节将被添加。 我只是想通过javascript自动滚动新闻。 现在,如果我想在mouseover上停止动画并继续mouseout,我该如何修改javascipt。 这是我的html页面: 这是我的javas
1回复

悬停时动画不会淡入

我正在尝试为侧边栏悬停效果。 但是由于某种原因,如果我将鼠标悬停在侧边栏上的元素过多,它们不会消失。 您可以在此处查看有效的Beta版本: http://www.nk.thnk.org/
1回复

使用Javascript悬停的CSS动画

当鼠标离开某个div时,我需要一个CSS动画在鼠标输入时向前播放一次并反向播放。 我这里有一个JsFiddle。 我需要class =“。item”div才能触发鼠标输入的div。 “动画”实际上是每条红线都有的4种不同的动画。 每条红线也是“.line”css类的一部分,所以我只是通
2回复

悬停时的背景位置动画

我有一个div1 ,它通过jquery在鼠标悬停方向上设置背景位置动画。 但它工作正常。 这不是正确的方向,我希望它可以在div上的每个鼠标悬停上工作。 查找jsfiddle 码:
1回复

悬停时的jQuery动画延迟

我正在编写一些jQuery动画以使所有.linkbox动画以增加高度,并且它工作得很好,除了我单击的元素比其他两个元素要慢(所以就像在悬停时它慢了一样),我该如何做?使所有这三个元素完全以相同的方式设置动画,不是应该已经这样做了吗? 而且他们是从底部进行动画制作的,是否可以告诉它从顶部进行动画
2回复

悬停时jquery动画边框

功能几乎正常。 当您将鼠标悬停在导航中的不同链接上时,我们的想法是让某种高光(背景或下划线)跟随您,当您将鼠标悬停在不同的链接上时,它会找出左侧定位以及宽度和动画匹配。 我需要修理什么? 在mouseleave或mouseout上,突出显示的边框应返回活动项目 活动项应始终是
1回复

悬停时更改元素时的动画

我制作了 3 个按钮来切换服务器,但我想制作动画,所以如果我将光标悬停在另一台服务器上,服务器名称的红色背景将移动到另一台服务器上。 我不知道该怎么做,所以如果你建议我,那将是很棒的! 这是带有 CSS 的 HTML: .serverchoosediv{ float: right; disp
1回复

动画在悬停时停止,从鼠标悬停开始,但是无法再次悬停以重复停止动画

在转盘上工作时,我可以使用动画和div包装,但是我想添加以下功能:悬停时停止转盘,并在鼠标移开时重新启动动画,但是它只能工作一次。 悬停会停止动画,鼠标悬停会再次开始,但是如果我再次悬停它不会停止。