정지 애니메이션이 작동하지 않는 경우, jQuery/hover

Question

jQuery를 사용하여 3 개의 다른 div의 배경색을 애니메이션화하고 3x3 격자를 만들기 위해 반복합니다. 호버 아웃/스톱 애니메이션을 제외한 모든 것이 호버링 타임이 1 초 이상 연장되면 작동을 멈추는 것처럼 보입니다.

1 초 동안 마우스를 놓고 밖으로 나가면 원하는대로 색상이 고정됩니다. 그러나 오랜 시간 동안 마우스를 가져 가면 호버 아웃/중지 기능이 중단됩니다.

여러 기능을 동시에 제어하려고 할 때 어떻게 호버/정지 기능이 작동하는지 설명 할 수 있습니까? jQuery를이 JSfiddle을 통해, 내가 여기에 작업 예제에 연결 한되는 작업 표시 할 수있는 유일한 방법으로

: 나는 꽤 당신의 코드에 의해 혼동하고있어 http://jsfiddle.net/Commandrea/KbLDq/3/

 function pixelColors(){ 
    var color = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 

    $('.logo').animate({ 
    backgroundColor: color 
    }, 1000, pixelColors); 

    } 

    function pixelColors2(){ 
    var color = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 

    $('.logo2').animate({ 
    backgroundColor: color 
    }, 2000, pixelColors2); 

    } 

    function pixelColors3(){ 
    var color = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 

    $('.logo3').animate({ 
    backgroundColor: color 
    }, 1500, pixelColors3); 

    } 


    $('#logo_back').hover(
    pixelColors, 
    function() { 
    $('.logo').stop() 
    } 
    ); 

    $('#logo_back').hover(
    pixelColors2, 
    function() { 
    $('.logo2').stop() 
    } 
    ); 

    $('#logo_back').hover(
    pixelColors3, 
    function() { 
    $('.logo3').stop() 
    } 
    ); 


    .header { 
    position: relative; 
    margin: 0 auto; 
    } 


    #home_header { 
    position: relative; 
    z-index: 7; 
    } 

    .pixCol { 
    float: left; 
    height: 288px; 
    margin-right: 20px; 
    margin-top: 12px; 
    min-height: 1px; 
    padding-left: 15px; 
    width: 227px; 
    } 



    #pixelBox { 
    left: 14px; 
    position: relative; 
    top: 20px; 
    } 

    .logo { 
    height: 69px; 
    width: 69px; 
    z-index: 8; 
    background-color:#9C3; 
    display:inline-block; 
    float:left; 
    background-color:#F60; 
    } 


    .logo2 { 
    height: 69px; 
    width: 69px; 
    z-index: 8; 
    background-color:#9C3; 
    display:inline-block; 
    float:left; 
    background-color:#F90; 
    } 

    .logo3 { 
    height: 69px; 
    width: 69px; 
    z-index: 8; 
    background-color:#9C3; 
    display:inline-block; 
    float:left; 
    background-color:#F33; 
    } 

    .logo_back{ 
    background:none; 
    height: 220px; 
    margin-top: 51px; 
    position: absolute; 
    width: 229px; 
    z-index: 9; 
    } 

    .logo_back2 { 
    background: url("images/logo/batterEmpty.png") no-repeat scroll 0 0 transparent; 
    height: 220px; 
    margin-top: 51px; 
    position: absolute; 
    width: 229px; 
    z-index: 9; 
    } 

    ​ 


    <div class="header"> 
    <div class="pixCol"> 
    <div id="home_header"> 
    <div id="logo_back" class="logo_back"></div> 
    <div id="pixelBox"> 

    <div class="logo"></div> 
    <div class="logo2"></div> 
    <div class="logo3"></div> 
    <div class="logo3"></div> 
    <div class="logo"></div> 
    <div class="logo2"></div> 
    <div class="logo2"></div> 
    <div class="logo3"></div> 
    <div class="logo"></div> 

    </div> 
    </div> 
    </div> 
    </div> 
    ​ 

Answer 1

, 당신은 왜 발로된다 동시에 3 애니메이션? [편집 : 오, 나는 다른 요소를 본다.] 어쨌든 멈추지 않는 이유가있다. stop(true)에 전화를 걸어 대기열에있는 애니메이션을 중지해야하고 동시에 3 개의 애니메이션을 끊임없이 발사하기 때문에 대기열에 많은 애니메이션. 진실을 말하면 당신의 바이올린은 잘 작동합니다.

Answer 2

당신은 문제

$('#logo_back').hover(
    function(){ 
     pixelColors(); 
     pixelColors2(); 
     pixelColors3(); 
    }, 
    function() { 
     $('.logo, .logo2, .logo3').stop(true); 
    } 
); 

DEMO.