機能の無効化/有効化ボタンが機能しない

Question

animateIt関数は、スクロール時にdivテキストの色を変更し、div＃enableをクリックするまでdiv＃disableでこの機能を停止します。ご覧のとおり、私はこのコードを書いたが、#disable部分は機能しないので、それをチェックして何が間違っているか教えてください。

var enable = true; 
 

 
$('#enable').on('click', function() { 
 
    if (!enable) { 
 
    enable = true; 
 
    animateIt(); // call again after enabled... 
 
    } 
 
}); 
 
$('#disable').click(function() { 
 
    enable = false; 
 
    $('#disable').css('background','blue'); 
 
}); 
 

 
function animateIt() { 
 
if (!enable) return; 
 
$(window).scroll(function (event) { 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll > 0 && scroll < 1000) { 
 
\t \t $('.position').css({ 
 
'color':'red))', 
 
'background':'rgba(0,40,90,1.00)' 
 
\t \t \t }) 
 
\t \t $('.position2').css({ 
 
'color':'rgba(255,248,0,1.00)', 
 
\t \t \t }) 
 
\t \t $('.position3').css({ 
 
'color':'rgba(255,0,215,1.00)', 
 
\t \t \t }) 
 
\t \t } 
 
    if (scroll > 1000 && scroll < 2000) { 
 
\t \t $('.position').css({ 
 
'color':'green', 
 
'background':'rgba(255,0,144,1.00)' 
 
\t \t \t }) 
 
\t \t $('.position2').css({ 
 
'color':'rgba(0,100,206,1.00)', 
 
\t \t \t }) 
 
\t \t $('.position3').css({ 
 
'color':'rgba(0,255,7,1.00)', 
 
\t \t \t }) 
 
\t \t } 
 
    if (scroll > 2000 && scroll < 3000) { 
 
\t \t $('.position').css({ 
 
'color':'yellow', 
 
'background':'rgba(255,0,226,1.00)' 
 
\t \t \t }) 
 
\t \t $('.position2').css({ 
 
'color':'rgba(155,0,255,1.00)', 
 
\t \t \t }) 
 
\t \t $('.position3').css({ 
 
'color':'rgba(224,224,224,1.00)', 
 
\t \t \t }) 
 
\t \t } 
 
\t 
 
    if (scroll > 3000 && scroll < 4000) { 
 
\t \t $('.position').css({ 
 
'color':'orange', 
 
'background':'rgba(255,2,6,1.00)' 
 
\t \t \t }) 
 
\t \t $('.position2').css({ 
 
'color':'rgba(69,66,179,1.00)', 
 
\t \t \t }) 
 
\t \t $('.position3').css({ 
 
'color':'rgba(124,141,245,1.0)', 
 
\t \t \t }) 
 
\t \t } 
 
    if (scroll > 4000 && scroll < 5000) { 
 
\t \t $('.position').css({ 
 
'color':'rgba(0,94,255,1.00)', 
 
'background':'rgba(255,0,226,1.00)' 
 
\t \t \t }) 
 
\t \t $('.position2').css({ 
 
'color':'rgba(224,224,224,1.00)', 
 
\t \t \t }) 
 
\t \t $('.position3').css({ 
 
'color':'rgba(155,0,255,1.00)', 
 
\t \t \t }) 
 
\t \t } 
 
\t if (scroll > 5000 && scroll < 6000) { 
 
\t \t $('.position').css({ 
 
'color':'cyan', 
 
'background':'rgba(255,238,0,1.00)', 
 
'text-shadow':'none' 
 
\t \t \t }) 
 
\t \t $('.position2').css({ 
 
'color':'rgba(176,50,0,1.0)', 
 
\t \t \t }) 
 
\t \t $('.position3').css({ 
 
'color':'rgba(100,16,5,1.00)', 
 
\t \t \t }) 
 
\t \t } 
 
\t if (scroll > 5000 && scroll < 6000) { 
 
\t \t $('.position').css({ 
 
'color':'blue', 
 
'background':'rgba(243,255,217,1.00)', 
 
\t \t \t }) 
 
\t \t $('.position2').css({ 
 
'color':'rgba(136,168,191,1.0)', 
 
\t \t \t }) 
 
\t \t $('.position3').css({ 
 
'color':'rgba(68,47,168,1.0)', 
 
\t \t \t }) 
 
\t \t } 
 
var color=$('.position').css('color'); 
 
$('#p1color').html(color); 
 
var color=$('.position2').css('color'); 
 
$('#p2color').html(color); 
 
var color=$('.position3').css('color'); 
 
$('#p3color').html(color); 
 
    
 
\t \t }); 
 
} 
 
animateIt();

body{text-align:center; height:10000px;} 
 
#disable{width:50px; height:50px; position:fixed; float:right; background:red;} 
 
.position{ 
 
color:rgba(0,255,65,1.00); 
 
background:rgba(0,40,90,1.00); 
 
font-weight:900; 
 
font-size:12px; 
 
font-family:mono; 
 
margin-top:0; 
 
overflow:hidden; 
 
display:inline-block; 
 
margin-top:40px; 
 
position:fixed; 
 

 
} 
 
.position2{ 
 
color:rgba(255,0,215,1.00); 
 
font-weight:900; 
 
font-size:12px; 
 
font-family:mono; 
 
margin-top:0; 
 
overflow:hidden; 
 
display:inline-block; 
 
margin-top:20px; 
 
    position:fixed; 
 
} 
 
.position3{ 
 
color:rgba(255,248,0,1.00); 
 
font-weight:900; 
 
font-size:12px; 
 
font-family:mono; 
 
margin-top:0; 
 
overflow:hidden; 
 
display:inline-block; 
 
margin-top:60px; 
 
position:fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="disable"> 
 
</div> 
 
<div class="position"> 
 
    A 
 
    </div> 
 
<div class="position2"> 
 
    B 
 
    </div> 
 
<div class="position3"> 
 
    C 
 
    </div>

Answer 1

問題は、スクロールイベント（例えば$(window).scroll(function(event) {})）その関数が結合し、その結合に結合している機能を設定内にあります。スクロールするときから関数が起動し、アニメーションを呼び出すたびに、enableがtrueの場合は関数をリバインドしているだけです。あなたがする必要があるのは、スクロールイベントにバインドされている関数内にenable変数を置くことです。

$(window).scroll(function(event) { 
    if (!enable) return; 
    // otherwise do fancy color stuff 
}); 

あなたが助け

var enable = true; 

$('#enable').click(function() { 
     enable = true; 
}); 

$('#disable').click(function() { 
     enable = false; 
}); 

$(window).scroll(function(event) { 
    if (!enable) return; 
    // rest of code 
} 

希望するためにJavaScriptを簡素化することができます！