1

mouseenterで背景の位置を変更し、テキストを移動する画像スプライトがあります。マウスを離すと、背景位置とテキストの両方が左に移動して、元の画像が表示されます。テキストは、位置が変更されると画像の上に座るように右から来る別の要素です。
mouseenter 部分は完全に機能し、画像とテキストの両方が同時に左にスクロールしますが、mouseleave では、クロム (およびクロムのみに見えるもの) では、テキストが最初に移動し、次に画像が後で続きます。 、画像アニメーションはテキストよりもかなり遅れて起動しています。クロムの .animate() に関するいくつかの問題を読みましたが、これに関連する問題はないようです。
これは明らかに何か問題がありますか？それとも、単にそれを行うためのより良い方法がありますか

 //animation on mouse enter
$("#featuredImage").mouseenter(function(){
    $(this).animate({ backgroundPositionX:"100%" });
    $("#featuredText").show("slide", { direction: "right" });
});      

 //animation on mouse leave
$("#featuredImage").mouseleave(function(){
    $(this).animate({ backgroundPositionX:"0%" });
    $("#featuredText").hide("slide", { direction: "right" }); 
});
4

1 に答える 1

1

ホバーしてみてください。

$("#featuredImage").hover(function(){
         $(this).animate({ backgroundPositionX:"100%"});
         $("#featuredText").show("slide" ,{ direction: "right"});
     },function(){
        $(this).animate({ backgroundPositionX:"0%" });
        $("#featuredText").hide("slide",{ direction: "right" }); 
     }
);
于 2013-11-13T12:18:11.230 に答える