1

私はポートフォリオを作成しています。作品例にカーソルを合わせると、タイトルが上部に表示され、その特定の作品例の下部にアニメーションが表示されます。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"});
}
);
4

3 に答える 3

0

これは、アニメーション アクションが呼び出された直後に、終了を待たずに display:none が呼び出されるためです。

最初のアクションのコールバックに 2 番目のアクションを配置する必要があるため、アニメーションが完了するとすぐに起動されます。

コードをテストしていませんが、次のようになるはずです。

$('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"});
  });
});

編集:私のコードをテストしたところ、動作します:)

于 2013-08-26T23:35:41.703 に答える
0

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'});
    });
  }
);
于 2013-08-26T23:38:59.047 に答える