javascript - 查询 : fadeIn hidden element in callback

Question

我必须在回调中淡入隐藏图像。

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

这张图片的 css(in head)

#bootle {
    visibility: hidden;
}

现在，在一个动画函数中，我试图在动画完成后淡出这个瓶子。我就是这样做的

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

但是这个第一次显示它没有淡入淡出效果，如果我首先尝试使用淡入淡出效果不佳，我该怎么办？

Answer 1

设置visibility: visible，隐藏元素(例如，display: none，这是jQuery的hide方法所做的)，然后淡入:

$('#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="/image/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="/image/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 所做的)，您可以只使用 display: none 首先在 CSS 中；那么你根本不需要 css 或 hide 调用:

#bootle { display: none }

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

实例:

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

#bootle {
  display: none
}

<div>
<img src="/image/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 为其保留空间.