jQuery scrollto nchors에서 애니메이션에 비활성화됩니다

Question

Ariel Flesler의 Scrollto JQuery 플러그인을 사용하고 있습니다. 스크롤 할 때를 제외하고는 모든 것이 훌륭합니다. 애니메이션은 커서를 일부 링크 위로 끌어냅니다. 요소를 비활성화하는 방법을 아는 사람이 있으면 애니메이션이 발생하는 동안 호버 기능이 있습니까?

Answer 1

링크에 ": 호버 트리거"가 있다고 말할 때 CSS : 호버 규칙 또는 호버 이벤트에 JavaScript 함수를 제한했다는 것을 의미합니까?

CSS 인 경우 교수형을 유발하는 속성을 설정하는 속성 (간단한 글꼴 크기 변경으로 내 기계에 매달려있는 것을 복제 할 수 없습니다). 내가 알 수있는 한, CSS : 호버를 막을 수는 없습니다.

JavaScript라면 Scrollto에게 전화하기 전에 이벤트를 풀 수 없습니까?

조금 더 정교하거나 예를 들어 유용 할 것입니다.

편집하다:

좋아, 당신의 의견에 응답하여 기본적으로 당신은 unbind 그만큼 mouseenter 그리고 mouseleave 사용하기 전에 이벤트 scrollTo:

$(...).unbind('mouseenter mouseleave');

데모

방문 http://demos.flesler.com/jquery/scrollto/#target-examples FireBug에서 다음 코드를 실행하십시오.

그런 다음 "테스트 스크롤"링크를 클릭하여 코드를 테스트 할 수 있습니다. 마우스가 나머지 링크 위로 떠날 때 브라우저가 매달려 있지 않다는 것을 알 수 있습니다.

스크롤이 중지되면 "돌아가는"링크를 클릭하면 이번에는 호버 이벤트를 풀지 않아 브라우저가 매달려 야합니다.

메모: 나는 아무것도 교수형을 경험하지 않았다. 느린 컴퓨터 나 이전 버전의 jQuery를 사용하고 있습니까? 데모가 예상대로 작동하는지 알려주세요.

/*
  Inject some CSS to add a background to the elements we
  are going to hover over and increase the font-size to 
  make the hover area bigger.
*/
$('head').append('<style type="text/css"> .back { font-size:3em!important; background-image:url(http://imgs.xkcd.com/comics/useless.jpg); background-repeat:no-repeat; } </style>');

/*
  Setup the hover events -- change the backgroundPosition
  and fade the elements in and out.
*/
function hoverOn() {    
  $(this)
    .css('backgroundPosition','-95px -210px')
    .fadeTo('normal', 1);
}

function hoverOff(){
  $(this)
    .css('backgroundPosition','-260px -110px')
    .fadeTo('normal', 0.5);
}

// Set the default opacity and bind the hover events
$('.back').not('#pane-target a:first')
  .css('opacity', 0.5)
  .hover(hoverOn, hoverOff);

// Modify the first link so that we can use it to trigger the scroll.
$('#pane-target a').eq(0)
  .css('backgroundImage', 'none') // Remove the backgroundImage for clarity
  .unbind('click') // unbind the old "go back" behaviour
  .text('test scroll')
  .click(function(){ 

    // unbind the hover events so that they don't hang the browser
    $('.back').not('#pane-target a:first')
      .unbind('mouseenter mouseleave');

    $('#pane-target').scrollTo(
      'li:eq(5)',
      800,
      {onAfter:function(){
        // re-bind the hover events
        $('.back').not('#pane-target a:first').hover(hoverOn, hoverOff);
      }}
    );

    return false;
  });