我想更改jQuery動畫中的背景圖像位置。但我的代碼不起作用。任何人都可以幫我把它縮短。jquery動畫中的背景圖像位置變化

以下是我的代碼

的CSS

#pnav a{ 
    background:url(http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Tickets-lg.gif) 0 0 no-repeat; 
    display:block; 
    width:20px; 
    height:42px; 
}

jQuery的

$('#pnav a') 
.hover(function() { 
    $(this).stop().animate({ 
     'background-position' : '(0px -42px)' 
    }, 150); 
}, function() { 
    $(this).stop().animate({ 
     'background-position' : '(0 0)' 
    }, 150); 
});

HTML

<div id="pnav"> 
<a href="#">123</a> 
</div>

這是Fiddle file

預先感謝您。

來源

2013-02-25 Roy Sonasish

我想，你可能沒有包括您的腳本在document.ready中。這就是爲什麼當文檔沒有準備好時它會被調用。我更新了我的代碼。和它的一個簡單的HTML。它的工作。 – 2013-02-25 09:56:25

背景圖像位置的動畫，我們需要使用「jquery.backgroundpos.js」你可以從這裏http://keith-wood.name/js/jquery.backgroundpos.js

$(document).ready(function(){ 

$('#pnav a') 
.hover(function() { 
    $(this).stop().animate({backgroundPosition: '0px ' + '35px'}, 500); 
}, function() { 
    $(this).stop().animate({backgroundPosition: '0px ' + '0px'}, 500); 
}); 


});

在這裏下載的更新jsFiddle file

來源

2013-08-13 13:05:37

替換這您的線路，

background:url('http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Tickets-lg.gif') no-repeat ;

加引號的URL在CSS

來源

2013-02-25 08:06:20 EnterJQ

你不需要在網址的CSS中引用引號 – 2013-02-25 08:12:16

我認爲jQuery的動畫不能動畫background-position，但你可以使用CSS轉換，而不是

#pnav a{ 
    background:url(http://www.us-bingo.com/images/Tickets/Solid-Color-Tyvek-Wrist-Tickets-lg.gif) 0 0 no-repeat; 
    display:block; 
    width:20px; 
    height:42px; 

    -webkit-transition: background-position 150ms ease-in-out; 
    -moz-transition: background-position 150ms ease-in-out; 
    -ms-transition: background-position 150ms ease-in-out; 
    -o-transition: background-position 150ms ease-in-out; 
    transition: background-position 150ms ease-in-out; 
} 

#pnav a:hover { 
    background-position:0px -42px; 

}

這裏是小提琴：http://jsfiddle.net/pavloschris/eg5zC/7/ 和transition瀏覽器combatibility：http://caniuse.com/#search=transition

來源

2013-02-25 08:13:48 xpy

我想你忘了點擊'更新'在你的小提琴中，然而你的方法確實工作 – 2013-02-25 08:16:44

另外jQuery可以動畫背景位置 - http://stackoverflow.com/ a/5078298/16959，然而jsfiddle似乎干涉了證明這個 – 2013-02-25 08:18:13

裏面的動畫函數，background-position不起作用。使用這個代替

$('#pnav a') 
.hover(function() { 
    $(this).animate({ 
     'background-position-x': '10%', 
     'background-position-y': '20%' 
    }, 550); 
}, function() { 
    $(this).animate({ 
     'background-position-x': '0%', 
     'background-position-y': '0%' 
    }, 550); 
});

：ref

但是

，你想通過CSS3.0爲 'XPY' 達到什麼樣所指出的，但它不會在IE

運行

更新：

下面

工作樣品：

<html> 
    <head> 
     <script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 
     <script> 
     $(document).ready(function(){ 
      $('#pnav a') 
        .hover(function() { 
         $(this).animate({ 
          'background-position-x': '10%', 
          'background-position-y': '20%' 
         }, 550); 
        }, function() { 
         $(this).animate({ 
          'background-position-x': '0%', 
          'background-position-y': '0%' 
         }, 550); 
        }); 
      }); 
     </script> 
     <style> 
      #pnav a{ 
       background:url(http://www.standard-icons.com/stock-icons/standard-road/scooter-icon.gif) 0 0 no-repeat; 
       display:block; 
       width:20px; 
       height:42px; 
      } 
     </style> 

    </head> 
    <body> 
      <div id="pnav"> 
       <a href="#">123</a> 
      </div> 
    </body> 
</html>

Fiddle

來源

2013-02-25 08:18:28

謝謝你的幫助，但這也不起作用 – 2013-02-25 08:57:35

嘿，我是用你的小提琴做出來的，而且它是爲我工作的。你可能想要調整座標值，否則它相當簡單嗎？ – 2013-02-25 09:37:20

你能提供你的小提琴文件鏈接嗎？ – 2013-02-25 09:53:46

jquery動畫中的背景圖像位置變化

回答

更新：

Fiddle

相關問題