Question

我有这些内容，我想在动画时悬停显示和隐藏。

首先我有默认的content-element。如果列表中没有元素徘徊，那将被显示。当列表中的元素被悬停时，我想查找相应的content-element并显示它。

我做了一个显示我的问题的jsfiddle。如果你可以用动画帮助我做这件事会很棒。谢谢！

任何能在这里提供帮助的人都可以吗？

jsfiddle.net/xf1b0g9a/2/

Answer 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>

_{*：我稍微更改了标记。}

Answer 2

使用display属性而不是visibility属性，并将opacity设置为0.然后使用jquery的animate函数将opacity设置为1：

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

JavaScript的。悬停时的动画逻辑

2 个答案: