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

这是因为在调用animate动作后立即调用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'});
    });
  }
);

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

3 个答案: