JQuery : 다른 모든 div를 제거하고 $ (this)를 왼쪽 상단으로 이동하십시오.

div의 격자가 있습니다 ("#entry"라고 부름). 나는 현재 누군가가 한 div를 클릭하면 모든 다른 것들이 희미해질 것입니다. 그러나 다소 갑작스럽게 선택된 (클릭 된) div는 part div의 왼쪽 상단으로 이동합니다. 다른 모든 것이 희미 해지면 화면의 해당 부분으로 "원활하게"전환하려면 어떻게해야합니까? 현재 사용중인 코드 아래에 제공 할 것입니다.

$(document).ready(function() { 
     $("div#entry").click(function() 
     { 
     $(this) 
      .siblings("div#entry") 
       .fadeOut(); 
     }); 
    });

덕분에 형제 자매를 페이드 아웃하기 전에

출처

2010-12-21 daveomcd

코드에 'entry'라는 ID를 가진 요소가 두 개 이상 있음을 의미합니다. 그렇다면 이것은 유효하지 않습니다. 대신 클래스를 사용해야합니다. – user113716

고마워요! 나는 최근에 두 사람의 차이점이 무엇인지, 그리고 나쁜 습관을 깨뜨리지 않았는지 질문했습니다. :) – daveomcd

우선 ID가 동일한 요소

부모 DIV에는 position:relative 스타일 집합이 있어야합니다. 당신이 다음

$("div.entry").click(function() 
{ 
    $(this).siblings.fadeOut(function() 
    { 
     $(this).animate({"left": "0","top":"0"}); 
    }); 
}

출처

2010-12-21 15:32:44

이것을 시도했지만 선택된 div가 여전히 그 위치에 천천히 도달하는 대신 왼쪽으로 "스냅"합니다. – daveomcd

그래,이 작동하지 않습니다. 왜 대답으로 선정 되었습니까? – bozdoz

위치 절대적으로 현재 위치 : 그 후

var element = $(this); 
var offset = element.offset(); // determine absolute position of the element 
element.css({ 
    position: 'absolute', 
    top:  offset.top+'px', 
    left:  offset.left+'px' 
});

, 당신의 요소를 페이드 아웃. 당신은 이후에 다음과 같은 코드를 사용하여 왼쪽 상단 모서리에이 요소를 이동할 수 있습니다

element.animate({ 
    top: '0px', 
    left: '0px' 
}, 1000);

당신은 아마 당신의 주변 요소와 CSS를 기반으로 오프셋 계산을 조정해야합니다. patrick dw의 힌트를 따르는 것이 좋습니다. ID는 전체 문서에서 고유하기 때문에 ID 대신 클래스를 사용하십시오.

출처

2010-12-21 15:25:46 jwueller

은 (http://api.jquery.com/animate/)

출처

2010-12-21 15:27:33 PseudoNinja

검사와 높은 게재 순위는 전에 다른 사람을 제거하고있다 (jquery position을)를 수정하고 애니메이션 기능을 조사 animate 그것은이 여러 HTML을 가지고 잘못된 오프

출처

2010-12-21 15:28:41

을 할 수있는 jQuery를 사용

또한 클래스 또는 ID 전에 요소 이름을 사용하는 것은 단지 혼자 ID 또는 클래스 이름을 사용하는 것보다 실제로 느린 있습니다.

예 :

$("div#entry")

는 모두 동일한 것을 달성한다

$("#entry")

보다 실행할 느리다.

이유는 앞에 jQuery에 요소를 제공하면 특정 ID/클래스를 검색하는 것보다 해당 요소에 대한 전체 DOM을 검색하기 때문입니다.

출처

2010-12-21 15:54:36 dmackerman

흠 ... 정말? –

감사합니다 이것을 몰랐습니다. – daveomcd

@Derek : 예. jQuery의 가장 빠른 선택자는 ID 선택기 ($ ('# someid'))입니다. 이는 기본 JavaScript 메소드 인 getElementById()에 직접 매핑되기 때문입니다. jQuery의 두 번째로 빠른 선택자는 태그 선택기 ($ ('head'))입니다. 다시 말하지만 이것은 기본 JavaScript 메소드 인 getElementsByTagName()에 매핑되기 때문입니다. – dmackerman

페이지에서 위치를 찾고 CSS 위치 값을 절대 값으로 설정 한 다음 CSS 위쪽, 왼쪽, 오른쪽 또는 아래쪽 값을 해당 값으로 설정해야합니다. 다음과 같이 할 수 있습니다.

그런 다음 클릭 한 경우 해당 위치를 절대로 설정할 수 있습니다. 그 후 형제를 페이드 아웃하고 클릭 한 div를 애니메이션하여 첫 번째 값의 위치로 이동합니다 (자동으로 이동하는 위치).

전체 코드와 예제는 jsfiddle입니다.

출처

2010-12-21 16:37:43 bozdoz

JQuery : 다른 모든 div를 제거하고 $ (this)를 왼쪽 상단으로 이동하십시오.

답변

관련 문제