jquery - 动画标题到底部然后动画回到顶部并消失

Question

我正在创建一个作品集，当您将鼠标悬停在一个工作示例上时，标题出现在顶部，然后动画到该特定工作示例的底部。在 mouseOut 上，我希望标题动画回到顶部然后消失。我对下面代码的问题是，只要我 mouseOut 标题就会消失，而不会将动画显示回顶部。我需要以某种方式链接它吗？

$('div.recentWork').hover(
function(){
$(this).find('.showTitle').animate({marginTop: "150px"});
$(this).find('.showTitle').css({display: "block", background: "black"});
},
function(){
$(this).find('.showTitle').animate({marginTop: "0px"});
$(this).find('.showTitle').css({display: "none"});
}
);

Answer 1

设置超时

$(this).find('.showTitle').css({display: "none"});

用一个

window.setTimeOut()

像这样：

var foo = window.setTimeOut((function(){$(this).find('.showTitle').css({display: "none"});}),1000)

Answer 2

这是因为 display:none 是在调用动画动作之后立即调用的，而不是等待它完成。

您必须将第二个动作放在第一个动作的回调中，因此只有在动画完成后才会触发它。

我还没有测试过代码，但它应该是这样的：

$('div.recentWork').hover(function(){
  $(this).find('.showTitle').animate({marginTop: "150px"});
  $(this).find('.showTitle').css({display: "block", background: "black"});
}, function() {
  $(this).find('.showTitle').animate({
    marginTop: "0px"
  }, 500, function() {
    $(this).find('.showTitle').css({display: "none"});
  });
});

编辑：刚刚测试了我的代码，它可以工作:)

Answer 3

你display: 'none'的动画结束之前正在发生。尝试类似：

$('div.recentWork').hover(
  function(){
    $(this).find('.showTitle').animate({marginTop: '150px'}, 'slow', function(){
      $(this).find('.showTitle').css({display: 'block', background: 'black'});
    });
  },
  function(){
    $(this).find('.showTitle').animate({marginTop: '0px'}, 'slow', function(){
      $(this).find('.showTitle').css({display: 'none'});
    });
  }
);