2014-01-16 89 views
0

我試圖在頁面向下滾動時彈出的div上創建最小化效果。一切都很好,只是一個問題。如果最小化功能完成,並且向上滾動頁面,它將恢復其原始值。我希望它在點擊最小化按鈕並向上滾動一點之後,應該保持最小化並且不會恢復。在jQuery中停止一個函數並運行另一個函數

這裏是我使用

$(function() { 
    $(window).scroll(function() { 
     var height = $(window).height() /2; 
     if ($(this).scrollTop() >= height) { 
      $("#box").animate({'bottom':'0px'},300); 
     } 
     else { 
      $("#box").stop(true).animate({'bottom':'-150px'},100); 
     } 
}); }); 

$('.minimize').toggle(function() { 
    $('#box').animate({'bottom':'-80px'},200);}, 
    function() { $('#box').animate({'bottom':'0px'},200); 
}); 

檢查演示fiddle

+2

添加一個開關/狀態管理,與添加一個類來通知用戶*有*點擊如果屬實最小化 - 不要動畫。 – MackieeE

回答

1

我Machiee的評論表示贊同。

你可以這樣來做:

$(function() { 
    $(window).scroll(function (e) { 
     if($('#box').hasClass('minimized')) 
      return; 
     var height = $(window).height() /2; 
     if ($(this).scrollTop() >= height) { 
      $("#box").animate({'bottom':'0px'},300); 
     } 
     else { 
      $("#box").stop(true).animate({'bottom':'-150px'},100); 
     } 
}); }); 

$('.minimize').toggle(function() { 
    $('#box').animate({'bottom':'-80px'},200); 
    $('#box').addClass('minimized'); 
}, 
    function() { $('#box').animate({'bottom':'0px'},200); 
       $('#box').removeClass('minimized'); 
}); 

檢查演示fiddle

+0

我也在考慮'removeClass()',但代碼與我之前所做的結構不匹配。這個工作正常。謝謝。 – SarmadK

相關問題