Jquery에서 퍼센트로 작업하기

유동적 인 레이아웃으로 사이트를 구축하고 있으므로 Jquery 크기와 애니메이션에 백분율을 사용해야합니다. 내가 발견 한 문제는 Jquery가 퍼센티지를 이해하지 못한다는 것이다. 다음은 내가 한 일의 예입니다.Jquery에서 퍼센트로 작업하기

페이지 <body>은 100 %입니다.

<article>은 페이지 본문의 너비의 71 %입니다.

<hgroup>

난 후 다시 페이지 폭의 71 %까지 확장 (에만 <hgroup> 표시되도록) 페이지로드 <hgroup> 동일한 폭으로 <article> 싶습니다 <article>

33.2 %의 폭 <hgroup>을 클릭하면 <article> 내의 나머지 콘텐츠가 표시됩니다. 동시에 <article>을 <hgroup> 너비만큼 왼쪽으로 밀고, <hgroup>을 숨기고 싶습니다.

이러한 종류의 계산을 수행 할 방법이 있습니까? 아니면 픽셀을 사용해야합니까?

출처

2011-08-06 ajw-art

을 필요로 어떤 효과 그것을 정리 해냈다. 내가 기적적으로 작동 한 코드는 다음과 같습니다.

 $(document).ready(function() { 
      $('section').hide(); 
      //Capture widths on page load 
      var bwidth = $('body').width(); 
      var awidth = $('article').width(); 
      var hgwidth = $('hgroup').width(); 
      $('hgroup').width(hgwidth); 
      $('article').width(hgwidth); 

      $('hgroup').click(function(){ 
      //Hide open article 
      var close = $('section:visible').parent(); 
      $(close).children('section').hide().end().width(hgwidth); 
      $(close).removeClass('active').css('marginLeft', '+=' +hgwidth).detach().appendTo('body'); 

      //Hide last Article 
       $('body article').last().hide(); 

      //Show current 
      $(this).parent().addClass('active') 
       $('.active').animate({ 
          width: awidth, 
          marginLeft: '-=' + hgwidth 
         },500); 
       $(this).next().delay(500).fadeIn(50); 
       $(this).css('box-shadow','0px 0px 8px #666'); 

       //Show Next Hgroup 
       $(this).parent().nextAll('article:first').show(); 

        }); 
     });

출처

2011-08-07 22:07:46

문제가 해결되면 [자신의 대답 수락] (http://meta.stackexchange.com/questions/65363/can-i-answer-my-own-question)을 읽어야합니다. –

슬라이드 효과를 찾고 있다고 생각합니다. jquery UI 슬라이드 효과 http://docs.jquery.com/UI/Effects/Slide을 살펴보십시오. 그것은 많은 코딩없이 당신을 도울 수 있습니다.

출처

2011-08-06 23:58:35 ShankarSangoli

3 개의 기사가 포함되어 있기 때문에 내가 가고있는 효과는 단일 슬라이드보다 아코디언에 가깝습니다. 가장 큰 문제는 필자의 스크립트에 물건 크기를 퍼센트로 표시하는 방법을 알아내는 것입니다. 나중에 효과를 정리할 것입니다. –

글쎄, 당신은

article { 
    width: 23.6%; 
    /* that's 33.2% of 71% of 100 */ 
} 

hgroup { 
    width: 100%; 
    /* that's in relation to article */ 
}

을 정의 할 수 플러스 당신이 무엇을 다음

필요한 위치

$('article').width($('body').width()/100 * 71); 
$('hgroup').width($('article').width()/100 * 33.2);

플러스 당신은 많은 좌절과 탄식, 내가 마지막으로 한

출처

2011-08-07 00:51:05 Zhenya

누군가가 javascript없이 어떤 이유로보고 있었다면 articles/hgroups가 적절한 크기가되도록하고 싶었습니다. 그런 식으로 콘텐츠가 사라지지 않을 것입니다. 나는 문서 준비에 너비 값을 캡쳐하고 스크립트 전체에서 사용할 수있는 변수로 저장하는 작업을 마쳤습니다. 그래도 고마워; 적절한 폭으로 대체 할 기사가 필요하지 않은 경우이 방법이 효과가있었습니다. –

그런 다음 CSS의 hgroup에 대해 기사의 너비를 71 %, hgroup의 경우 33.2 %로 설정할 수 있습니다. 그런 다음 pageload에서 각각 jquery를 통해 23.6과 100으로 설정 한 다음 위에서 설명한대로 다시 71 %와 33.2 %로 클릭하십시오. – Zhenya

아, 해결책을 찾은 것 같습니다. 신경 쓰지 마. – Zhenya

Jquery에서 퍼센트로 작업하기

답변

관련 문제