90%,110%缩放可停止jQuery动画

时间:2018-08-24 15:15:14

标签: jquery css google-chrome

我使用jQuery动画弹出菜单。在Chrome中,缩放比例为90%和110%会阻止动画运行,并且菜单不会显示。用户没有其他理由可以缩放到该级别。

我尝试了rem em和px都无济于事。所有其他缩放级别都可以正常工作。

代码:

    // Help  ============================================================================
    $("body").on("click", "#btn-help", function(){      
        var el= '#myhelp';
        if($(el).width()!==0){
            $(el).animate({width: '0rem', height: '0rem', opacity: '0'  }, 300);
            $("#fa1").attr('class', 'fa fa-question');
        }else{          
            $(el).animate({width: '30rem', height: '40rem', opacity: '1'  }, 300);
            $("#fa1").attr('class', 'fa fa-times');
        }
    });

CSS:

/* Help Box =======================================================*/
    .help{
        position: fixed;
        z-index: 30;
        top: 6rem;
        left: 3.0rem;
        height: 0rem;
        width: 0rem;
        border-style: solid;
        border-color: #ffc107;;
        border-radius: 1.0rem;
        overflow: hidden;
    }

HTML:

<button id="btn-help" class="btn btn-circle btn-warning btn-help" title="Help for this page" ><i id="fa1" class="fa fa-question"></i></button>

    <div id="myhelp" class="help"  style="display:inherit">
        <div class="helpbody"> 
            <p>this is the help text</p>
        </div>
    </div>

希望有人可以提出解决方案。

欢呼

布里

0 个答案:

没有答案