滑出分區縮放

Question

$(function() { 
    $("#clickme").click(function() { 
     if($(this).parent().hasClass("popped")){ 
     $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}).removeClass("popped"); 
    }else { 
     $(this).parent().animate({right: "0px" }, {queue: false, duration: 500}).addClass("popped");} 
    }); 


    $(document).on('click',function(e){ 
     if($('#slideout').hasClass("popped")){ 
     $('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped"); 
     } 
    }); 

    $('#slideout').on('click',function(e){ 
     e.stopPropagation(); 
    }); 

}); 

<div id="slideout"> 
    <div id="slidecontent"> 
     Yar, there be dragonns herre! 
    </div> 
    <div id="clickme"> 
    </div> 
</div> 

其滑出一個div。但是，當我使用這個腳本，在縮放網站 - 水平滾動不顯示。它如何解決？ 謝謝。

Answer 1

你可以嘗試這樣的事情： -

$(document).on('click',function(e){ 
     if($('#slideout').hasClass("popped")){ 
     $('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped"); 
     } 
    }); 

JS FIDDLE

Answer 2

$(document).on('click',function(e){ /* Hide on Outside Click*/ 
    if($('#slideout').hasClass("popped")){ 
     $('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped"); 
    } 
}); 

$('#slideout').on('click',function(e){ /*Ignore 'Hide on Outside Click' on clicking #slideout element*/ 
    e.stopPropagation(); 
}); 

此代碼應工作

你的最終代碼將是：

$(function() { 
    $("#clickme").click(function() { 
     if($(this).parent().hasClass("popped")){ 
     $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500}).removeClass("popped"); 
    }else { 
     $(this).parent().animate({right: "0px" }, {queue: false, duration: 500}).addClass("popped");} 
    }); 


    $(document).on('click',function(e){ 
     if($('#slideout').hasClass("popped")){ 
     $('#slideout').animate({right:'-280px'},{queue:false,duration: 500}).removeClass("popped"); 
     } 
    }); 

    $('#slideout').on('click',function(e){ 
     e.stopPropagation(); 
    }); 

}); 

JS FIDDLE