2013-02-11 3 views
1

그래서 한 번에 여러 요소를 움직이는 사용자 정의 전환이 있습니다. 애니메이션이 끝나기 전에 사용자가 다음 슬라이드 버튼을 빠르게 클릭하면 모든 종류의 문제가 발생합니다. 어떻게 해결할 수 있습니까? 링크에 활성 클래스를 추가/제거하는 것에 대한 멍청한 생각을 시도했지만 작동하지 않았습니다.jQuery Cycle - 한 번에 여러 슬라이드를 순환 중지합니다.

$.fn.cycle.transitions.slideCustom = function($cont, $slides, opts) { 
    $caption = $('.serverbig') 
    $feature = $('.featurehol') 
    $heading = $('h2') 
    opts.fxFn = function(curr,next,opts,cb,fwd) { 
     $feature.animate({ top: '350px' }, 500, opts.easing); 
     $heading.animate({ left: '-550px' }, 500, opts.easing); 
     $caption.animate({ right: '-550px' }, 500, opts.easing, function() { 
      $(curr).animate({ opacity: 0 }, 500, opts.easing, function() { 
      });   
      $(next).css({ display: 'block'}).animate({ opacity: 1 }, 500, opts.easing); 
      $feature.animate({ top: '66px' }, 500, opts.easing); 
      $heading.animate({ left: '0' }, 500, opts.easing); 
      $caption.animate({ right: '0px' }, 500, opts.easing, function() { 
      if(cb) cb(); 
      }); 
     }); 
    } 
} 
$('#sliderb').cycle({ 
    fx:  'slideCustom', 
    speed: 'slow', 
    timeout: 0, 
    next: '.nextslide', 
    prev: '.prevslide', 
    easing: 'easeInOutBack', 
    slideExpr: '.slide', 
}); 

이 추가 문제 대신를 사용하여 페이딩의, 깜박 할 수있는 배경 (메인 슬라이드) 원인 : 여기

문제 보여줄 수있는 jfiddle입니다 : 내 JS 여기 http://jsfiddle.net/SHRA6/12/

입니다 불투명도 애니메이션. 당신이 실제로 싶어 당신이 onPrevNextEvent:에 후크해야합니다 컨트롤을 사용하지 않도록 설정하면

+0

http://jsfiddle.net – Trufa

+0

에서 실제 예제를 작성하면 도움이 될 것입니다. 또한 형식이 잘 지정된 코드를 질문에 포함하십시오. – Trufa

+0

게시 할 jfiddle을 추가했습니다. – Michael

답변

1

당신은 너무 $feature.stop().animate(/* your code */)

같은 애니메이션 전에 .stop()를 사용하여 시도 할 수 있습니다. stack overflow question에 우아한 해결책이 있습니다.

이벤트가 진행되는 동안 컨트롤 위에 투명 블록 요소를 사용하여 이벤트를 사용하지 않도록 설정합니다. 질문에서 마지막 편집과 바이올린을 체크 아웃하십시오.

편집 : 당신은 때문에이 라인

$caption.animate({ right: '0px' }, 500, opts.easing, function() { 
      if(cb) cb(); 
}); 

콜백 체크를 타고 바로이 애니메이션의 호출 후에 넣어 이상한 문제가 발생했다.

+0

그래, 나는 현재의 애니메이션을 방해하지 않기를 바랄 지 모르지만 작동한다. – Michael

+0

"문제"는 정확히 무엇입니까? –

+0

잘하면 jfiddle가 작동해야합니다. 배경색은 기본적으로 몇 번 바뀌고 올바른 슬라이드의 콘텐츠가 애니메이션으로 처리됩니다. – Michael