Question

我是jQuery的新手，我正在尝试实现简单的交互。

方案我的页面上有一个圆圈和一个正方形。默认情况下，方块是隐藏的（显示：无）。当我将鼠标悬停在圆圈上时，它会在其中显示一个链接。当您点击它时，圆圈将消失，方形将淡入。

问题圆圈逐渐消失，正方形渐渐消失，但正方形渐渐消失后，正方形会隐藏起来。显示：阻止属性似乎不起作用？

我编辑了代码，现在可以使用了。

$(function(){
  $("#click").on("click", function(){
    $(".circle").addClass("fade-out");
    $(".square").addClass("fade-in");
  });
});

Answer 1

实际上您的代码可以正常工作，但即使显示正方形， opacity 仍然是0。

<强> 2options：
1）删除 square

中的不透明度

.square{
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  display: none;
}

2）或在 fade-in

中添加不透明度

.fade-in{
  display: block;
  opacity: 1;
  animation: fade-in .5s  ease-in-out 1; 
}

Answer 2

从opacity 0

中删除.square

Answer 3

这是工作fiddle

<强> CSS

fade-out{

  display:none;  
  animation: fade-out .5s  ease-in-out 1; 
}

.fade-in{
  display: block;
  opacity:1;
  animation: fade-in .5s  ease-in-out 1; 
}

Answer 4

$("#click").on("click",function(){
    $(".circle").fadeOut(200,function(){
    $(".square").fadeIn(500);
    });
});

示例：http://jsfiddle.net/dSR9s/

Answer 5

这是我刚才想到的解决方案。问题在于@keyframe淡入。

http://codepen.io/vennsoh/pen/urFid

jQuery：如何隐藏元素然后揭示另一个元素？

5 个答案: