호버에서 jquery 애니메이션을 일시 중지하고 클릭시 중지

DIV 세트가 위에서 아래로 순환하는 웹 페이지를 만들려고합니다 (바이올린 참조). 그런 다음 div의 특정 부분 (이 경우 STOP 링크)을 가리킬 때마다 애니메이션이 멈추고 마우스 아웃시 다시 재생됩니다. 지금 당장 부족한 부분은 STOP 링크를 클릭 할 때마다 애니메이션을 멈추는 것입니다. 링크에 정지 기능을 추가했지만 작동하지 않습니다. 내가 만든 호버 기능으로 인해 충돌이나 일종의 문제가 발생했을 수 있습니다.호버에서 jquery 애니메이션을 일시 중지하고 클릭시 중지

사전에 도움에 감사 드리며 noobish 질문에 대해 사과드립니다. 바이올린에

링크 : http://jsfiddle.net/Psp9R/

JQuery와 :

$(document).ready(function() { 

$(".row").last().addClass("last"); 
$(".mholder").each(function() { 
    var i = 0; 
    $(this).find(".row").each(function() { 
     var $this = $(this); 
     $this.css("bottom", i); 
     i += $this.height(); 
    }); 
}); 

// PLAY AND STOP 
$('#start').click(function() { 
    $("#overlay").hide(); 
    var countScrolls = $('.mholder .row').length; 

    for (var i=0; i < countScrolls; i++) { 
     doScroll($('.mholder .row:nth-child(' + i + ')')); 
    } 
}); 

$('.stop').click(function() { 
    var countScrolls = $('.mholder .row').length; 
    $("#overlay").show(); 
    for (var i=0; i < countScrolls; i++) { 
     $('.mholder .row:nth-child(' + i + ')').stop(); 
    } 
}); 

//PAUSE ON HOVER 

$(".stop").hover(function() { 
    var countScrolls = $('.mholder .row').length; 
    for (var i=0; i < countScrolls; i++) { 
     $('.mholder .row:nth-child(' + i + ')').stop(); 
    } 
}, function() { 
    var countScrolls = $('.mholder .row').length; 

    for (var i=0; i < countScrolls; i++) { 
     doScroll($('.mholder .row:nth-child(' + i + ')')); 
    } 
}); 

}); 

function doScroll($ele) { 
var bottom = parseInt($ele.css("bottom")); 
    if (bottom < -60) { //bit arbitrary! 
    var $lastEle = $ele.closest('.mholder').find(".last"); 
    $lastEle.removeClass("last"); 
    $ele.addClass("last"); 
    var bottom = (parseInt($lastEle.css("bottom")) + $lastEle.height()); 
    $ele.css("bottom", bottom); 
    } 
    $ele.animate({ 
     bottom: (parseInt(bottom) - 80) 
    }, 2200, 'linear', function() { 
     doScroll($(this)) 
    }); 
}

출처

2013-04-11 false-hero

당신은 중지를 클릭하면, 정말 중지 무엇을 알고 있지만 당신은 정지 버튼에서 마우스를 이동하면, 브라우저는 당신이로 마우스 이벤트와 그것을 발사 것을 이해 조깅을 재개합니다. 따라서 브라우저에 중지 버튼을 클릭하고 mouseout 이벤트를 무시한다고 알려야합니다. 브라우저 정지를 주문하려면 iStop 플래그를 추가하여 코드를 변경했습니다. 당신은 그것을 밖으로 확인할 수 있습니다 : jsFiddle

출처

2013-04-11 07:55:36

예, 그것은 거기에 기능과 충돌이있는 것 같습니다. 나는 누군가 그것에 대해 물어 봤고 너희들도 똑같은 대답을했다. 고마워요! –

이 정지 링크를 클릭하면 삭제되는 간격을 구현 후 마우스를 이동하면 다시 시작했다.

하여 setInterval - https://developer.mozilla.org/en/docs/DOM/window.setInterval

위해 clearInterval - https://developer.mozilla.org/en-US/docs/DOM/window.clearInterval

출처

2013-04-11 07:14:29

호버에서 jquery 애니메이션을 일시 중지하고 클릭시 중지

답변

관련 문제