javascript - スライドアウト分割ズーム

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フィドル

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フィドル