jQuery Transit Function Complete

Question

jquery transit을 사용하여이 두 함수를 만들었습니다.이 함수는 사용자가 오른쪽 또는 왼쪽 버튼을 누를 때 페이지의 새 블록 블록에서 슬라이드하도록 설계되었습니다. 그들은 시간의 일부를 작동합니다. 다른 시간에 내용이로드되고 숨김이 해제되지 않습니다. 그래서 그것은로드 될 것이고 당신은 크롬으로 그것을 검사 할 수 있고 디스플레이가 여전히 none으로 설정되어있는 것을 볼 수 있습니다. 다른 시간에는 문제가 없으며 정확하게 의도 한대로 작동합니다. 페이지에 오류가 없습니다. 페이지의 유일한 JavaScript는이 함수의 여러 버전으로, 다른 페이지를로드하고 일부 문제 또는 형식으로 스크롤 할 수 있습니다.

제 질문은 jquery Transit에서 함수가 올바르게 사용 되었습니까? 내 기능이 의도 한대로 작동하고 있거나 큰 것을 놓친 경우 제대로 설정되지 않았습니다.

function ShowPartTiles_FromLeft() { 
    $("#SeriesPartBrand").transition({ 
     opacity: 0, 
     x: "1000px" 
    }, 500, "out", function() { 
     $("#SeriesPartBrand").transition({ 
      opacity: 0, 
      x: "-1000px" 
     }, 0, "out") 
    }), $("#SeriesPartBrand").load("<?php echo uri_string() ?>/part", function() { 
     $("#SeriesPartBrand").transition({ 
      opacity: 1, 
      x: "0" 
     }, 500, "in") 
    }) 
} 

function ShowPartTiles_FromRight() { 
    $("#SeriesPartBrand").transition({ 
     opacity: 0, 
     x: "-1000px" 
    }, 500, "out", function() { 
     $("#SeriesPartBrand").transition({ 
      opacity: 0, 
      x: "1000px" 
     }, 0, "out") 
    }), $("#SeriesPartBrand").load("<?php echo uri_string() ?>/part", function() { 
     $("#SeriesPartBrand").transition({ 
      opacity: 1, 
      x: "0" 
     }, 500, "in") 
    }) 
} 

Answer 1

jQuery에는 전환 기능이 없습니다. 애니메이션 기능이 있습니다. 하지만 CSS3 전환 속성을 사용 권합니다 :

#SeriesPartBrand { 
    transition: all 0.5s; 
} 

function ShowPartTiles_FromLeft() { 
    $("#SeriesPartBrand").css({opacity: 0, left: 1000}); 
    $("#SeriesPartBrand").off('transitionend').on('transitionend', function() { 
     $("#SeriesPartBrand").css({opacity: 0, left: -1000}); 
     $("#SeriesPartBrand").load("<?php echo uri_string() ?>/part", function() { 
      $("#SeriesPartBrand").css({opacity: 0, left: 0}); 
     }); 
    }); 
} 

이것은 당신이 시작할 수 있어야합니다. 또한 JS 함수에 첫 번째 대문자를 사용하지 말고 이름을 "showPartTilesFromLeft()"와 같이 보일 것입니다.

HTML ids와 클래스는 모두 소문자로 쉼표 "-"로 구분하여 입력해야합니다.