jQuery의 $ (this)에서 CSS 값 얻기

그래서 플러그인을 통해 BG 이미지를 움직이는 코드를 작성했습니다. 클래스의 각 요소가 동일한 BG 이미지를 갖는 일반적인 솔루션입니다. 내 탐색 표시 줄의 각 열에 고유 한 이미지가있는 스프라이트를 사용하고 있습니다. 이 위대한 작품을

$('#nav a') 
.mouseover(function(){ 
    $(this).stop().animate(
     {backgroundPosition:"(0 -250px)"}, 
     {duration:500}) 
    }) 
.mouseout(function(){ 
    $(this).stop().animate(
     {backgroundPosition:"(0 0)"}, 
     {duration:500}) 
    })

, 그래서 각 요소에 대한 Y 오프셋 설정할 수 있지만 각 링크는 x 오프셋 변경되지 않습니다/모든 애니메이션 자신의 가지고 코드는 thusly 히입니다. 예 CSS :

li.downloads a { 
    background:url(img/navsprite.png) repeat -318px -9px; 
}

내가 -318px 200px 같은에 -318px -9px을 롤백 할 수 있지만, 다른 요소에 대해 내가 -482px 200px에 -482px -9px을 변경하려는 것입니다. Y- 오프셋 만 변경해야하지만 $ (this) 요소의 CSS에서 해당 값을 가져 와서 애니메이션 매개 변수에 넣을만큼 jQuery의 구문을 잘 모릅니다. 감사!

출처

2010-02-12 Alex Mcp

는이 같은 배경 위치를 얻을 수 있습니다 :

$(this).css("background-position");

는이 같은 배열에 두 값을 얻을 수 있습니다 : 당신이 bgpos[0]와 bgpos[1]으로 두 값에 액세스 할 수 있습니다

var bgpos = $(this).css("background-position").split(" ");

합니다.

출처

2010-02-12 16:46:31 Sampson

를 그리고 모두는 X이고 Y 추가 선택 속성? 이상적으로 내가 원하는 것은 "BackgrounPosition으로 변경 : ($ x -200px)"또는 비슷한 것입니다. –

@Alex : 업데이트 된 텍스트를 참조하십시오. 값을 분할 한 다음 배열 항목을 통해 두 가지를 모두 참조 할 수 있습니다. 그 시점에서 – Sampson

, 당신은 당신의 값을 얻기 위해 정규식을 사용해야한다고 생각합니다. – Mike

background-position-x CSS 속성이 있습니다. 이것은 IE에서만 가능하지만 문제에 대한 유효한 해결책이 아닐 수 있습니다.
jQuery는 f.e.를 지정하여 상대 애니메이션을 지원합니다. + = 50px; 작동하는지
아니 생각은하지만, 다음과 같은 코드를 시도 할 수 :

$('#nav a') 
.mouseover(function(){ 
    $(this).stop().animate(
     {backgroundPosition:"(+=0 -250px)"}, 
     {duration:500}) 
    }) 
.mouseout(function(){ 
    $(this).stop().animate(
     {backgroundPosition:"(+=0 0)"}, 
     {duration:500}) 
    })

출처

2010-02-12 16:51:01

jQuery.fn.getBackgroundxPosition = function(val) { 
    var position = $(this).css('background-position'); 
    var position_array=val.split(' '); 
    var x_pos = position_array[0]; 

    if(typeof(position) === 'undefined'){ //IE fix 
     x_pos = $(this).css('background-position-x'); 
    } 
return x_pos; 
};

나는이 (테스트하지) 작동합니다 생각

출처

2010-02-12 16:52:10 Tim

jQuery의 $ (this)에서 CSS 값 얻기

답변

관련 문제