Question

我要在回调中淡化隐藏的图像。

<img src="images/bottle.png" id="bootle" >

此图片的css（头部）

#bootle {
    visibility: hidden;
}

现在，在动画功能中，我试图在完成动画后淡入此瓶子。我就是这样做的

function () {
    $('#bootle').css({
        visibility: 'visible'
    }).fadeIn(5000);
} //its  callback

但是这个首先显示它没有淡入淡出效果，如果我尝试先使用fadeIn，那么我的工作怎么办？

Answer 1

设置visibility: visible，隐藏元素（例如，display: none，这是jQuery的hide方法所做的），然后fadeIn：

$('#bootle').css("visibility", "visible").hide().fadeIn(5000);

直播示例：

$("input[type=button]").on("click", function() {
  $('#bootle').css("visibility", "visible").hide().fadeIn(1000);
});

#bootle {
  visibility: hidden;
}

<div>
<img src="https://i.stack.imgur.com/6Molf.png?s=32&g=1" id="bootle">
</div>
<input type="button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

或者您可以将hide合并到css来电：

$('#bootle').css({
    visibility: "visible",
    display: "none"
}).fadeIn(5000);

直播示例：

$("input[type=button]").on("click", function() {
  $('#bootle').css({
    visibility: "visible",
    display: "none"
  }).fadeIn(1000);
});

#bootle {
  visibility: hidden;
}

<div>
<img src="https://i.stack.imgur.com/6Molf.png?s=32&g=1" id="bootle">
</div>
<input type="button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

同样的结果。

或者正如Tushar在评论中建议的那样，如果你不需要使用的布局空间（这是visbility: hidden所做的），你可以在CSS中首先使用display: none ;那么您根本不需要css或hide来电：

#bootle { display: none }

$('#bootle').fadeIn(5000);

直播示例：

$("input[type=button]").on("click", function() {
  $('#bootle').fadeIn(1000);
});

#bootle {
  display: none
}

<div>
<img src="https://i.stack.imgur.com/6Molf.png?s=32&g=1" id="bootle">
</div>
<input type="button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

请注意按钮的移动方式，因为它位于图像下方，display: none将图像完全从布局中取出，而visibility: hidden为其保留了空间。

Answer 2

而不是visibility: hidden;使用opacity: 0。然后你可以使用jQuery .animate()：

$('#bootle').animate({ opacity: 1 }, 5000);

.fadeIn()和.fadeOut()使用css display属性。

Jquery：fboundIn回调中的隐藏元素

2 个答案: