3

IE8 と IE7 の両方で動作するが、IE9 では失敗するものを見つけたとは信じられません。これが私が取り組んでいたページです：[サイトへのリンク][1]。IE9 では、サイド メニューのリンクにカーソルを合わせると、ブラウザが背景をリセットし、background-position: 0 0これが適用された後にのみ、スクリプトがそれをアニメーション化する方法に注意してくださいbackground-position: -20px 0(最初に移動したい場所)。私が何か間違ったことをしたのでしょうか、それとも IE のバグですか? また、それを修正するためにいくつかの助けが必要です。

ここに私がIEブラウザのみに適用しているスクリプトがあります:

**

  $('#nav_bar li')
.css( {backgroundPositionX:"-224px",
       backgroundPositionY:"0px"} )
.mouseenter(function(){
    $(this).stop().animate(
        {backgroundPositionX:"-20px"}, 
        {duration:550})
    })

.mouseleave(function(){
    $(this).stop().animate(
        {backgroundPositionX:"-224px",
        backgroundPositionY:"0px"}, 
        {duration:550})
    })

助けてくれてありがとう！

[1]:

4

1 に答える 1

2

次の CSS のみのソリューションを提案できますか?

#nav_bar li {
    /* whatever you need for the background image */
    background-position: -224px 0;
    transition: background-position 0.55s ease;
    -webkit-transition: background-position 0.55s ease;
}
#nav_bar li:hover {
    background-position: -20px 0;
}

本当に IE9 以下で動作させたい場合は (IE10 でも問題なく動作するため)、backgroundPositionコンポーネントのプロパティではなく、それ自体をアニメーション化してみてください。

$("#nav_bar li")
 .css({backgroundPosition:"-224px 0"})
 .hover(
  function() {$(this).stop().animate({backgroundPosition:"-20px 0"},{duration:550});},
  function() {$(this).stop().animate({backgroundPosition:"-224px 0"},{duration:550});}
 );
于 2012-12-21T18:15:26.757 に答える