플로팅 요소에 jquery 애니메이션

Question

저는 자바 스크립트가 처음이에요. jquery로 플로팅 요소에 애니메이션을 적용하는 데 문제가있어서 누군가 고칠 수 있도록 노력하겠습니다. 100 % 너비 가로 아코디언을 만들 수 있습니다.

이를 위해 래퍼에 일부 부동 div가 있습니다. 자바 스크립트를 사용하면 래퍼의 너비를 div 수 (백분율)로 나눕니다. 그런 다음 클릭 할 때 선택한 div가 큰 크기가되고 다른 크기가 작은 크기가됩니다. 문제는 애니메이션 중 마지막 div가 맨 아래에 표시됩니다. 끝내면 좋은 곳으로갑니다. 창 크기에 따라 문제가 발생하는 것을 보았습니다. 어떤 경우에는 괜찮지 만 항상 그런 것은 아닙니다. 여기에 바이올린 링크가 있습니다. 예를 들어 70 % 대신 69 %로 열린 크기를 만들어서 총 너비를 99 %로 설정하는 솔루션을 사용했지만 실제로는 100 % 너비가 필요합니다. 어떻게 만들었는지 정말로 모릅니다. 누군가가 내가이 문제를 해결하거나 다른 해결책을 찾도록 도울 수 있다면 좋을 것입니다.

PS : 변명 내 영어 :-)

Answer 1

문제는 당신이 완벽하게 동기화되지 않은 실행 두 개의 독립 애니메이션이 있고 두의 총 비율이 항상 100 % 미만이 될 것으로 기대한다는 것입니다. 동시에 두 가지를 시작하면 가끔씩 이런 일이 일어나지 않고 합계가 100 %를 넘으면 마지막 행이 다음 행으로 푸시됩니다.

가장 간단한 해결 방법은 성장하는 것을 약간 지연 시켜서 항상 합계가 100 % 미만이되도록하는 것입니다. 두 번째 애니메이션에 .delay (50)가 추가 된 것을 볼 수 있습니다.이 경우 증가하는 요소가 항상 축소 요소 뒤에 있으므로 총계가 항상 100 % 미만입니다. 실무 데모 : http://jsfiddle.net/jfriend00/Fkb5K/. .delay(50)가 추가 된 코드의

발췌문 :

if (!$el.hasClass('current')) 
    { 

     // Animate other columns to smaller size 
     $otherItems 
     .removeClass('curCol') 
     .stop(true) 
     .animate({ 'width': $closedItemsWidth }, 500, 'linear') 
     .css({"cursor":"pointer"}); 

     // Animate current column to larger size 
     $el 
     .addClass('curCol') 
     .stop(true) 
     .delay(50) 
     .animate({ 'width' : $openItemWidth }, 500, 'linear') 
     .css({'cursor' : 'default'}); 

    // Make sure the correct column is current 
    $otherItems.removeClass('curCol'); 
    $el.addClass('curCol'); 


    } 

는 아마 가장 좋은 방법은 (하나의 애니메이션이 아닌이) 동일한 애니메이션의 두 폭 비율을 변경하는 사용자 정의 애니메이션 그래서 그들은 항상에 있습니다 완벽한 동기화.

다음은 맞춤 애니메이션입니다. 그것은 당신이 성장하고있는 요소의 애니메이션을 제거하고 더 짧은 모든 것들에 스텝 함수 콜백을 추가합니다. step 함수는 요소 중 하나가 애니메이션에서 크기를 변경할 때마다 호출됩니다. 해당 단계 함수에서 해당 시점의 더 짧은 요소의 너비를 합한 다음 더 긴 요소를 설정하여 매번 100 %의 완벽한 합계를 정확하게 추적합니다. 여기

// On click 
$grid.delegate('#grid > .col', 'click', function() { 
    // Settings 
    var $el = $(this); 
    var $allItems = $grid.children('.col'); 
    var $otherItems = $allItems.not($el); 

    if (!$el.hasClass('current')) { 
     // Animate other columns to smaller size 
     $otherItems.stop(true) 
     .removeClass('curCol') 
     .animate({ 'width': $closedItemsWidth}, {step: function(prop, fx) { 
      var cumWidth = 0; 
      var item = this; 
      $otherItems.each(function() { 
       // haven't changed the width of this item yet, so use new width 
       if (this == item) { 
        cumWidth += fx.now; 
       } else { 
        cumWidth += parseFloat(this.style.width); 
       } 
      }); 
      $el.css({width: (100 - cumWidth) + '%'}); 
     }, duration: 500 }, 'linear') 
     .css({"cursor":"pointer"}); 

     // Animate current column to larger size 
     $el.addClass('curCol').css({'cursor' : 'default'}); 
    } 
})​ 

근무 데모 : http://jsfiddle.net/jfriend00/7zubL/