jQuery缓动插件在计算机上工作正常,但在我的手机上没有任何作用

时间:2020-06-13 20:59:31

标签: javascript jquery plugins jquery-plugins easing

因此,我可以在计算机上正常使用JQuery easing 1.3插件,与窗口大小无关,但是在手机上却没有任何作用。即使我的css过渡在被触摸时也能很好地响应,但这就像它对触摸没有反应一样。

本来应该做的就是在按下时展开“筋急转弯”,并在其下方显示内容。

我尝试使用touch.punch时没有运气。谁能帮我这个忙,因为我在这里开始感到头疼。谢谢!

这是我的代码:

.ib-content-preview{
    position: absolute;
    top: 44px;
    left: 0px;
    background: #000;
    width: 100%;
    height: 630px; /*dynamic*/
    display: none;
}
.ib-content-preview .ib-teaser h2{
    font-size: 50px;
    padding: 85px 40px 20px 40px;
}
.ib-content-preview .ib-teaser span{
    padding: 20px 0px 0px 5px;
    font-size: 22px;
}
.ib-content-full{
    font-family: 'Oswald';
    text-transform: none;
    line-height: 26px;
    margin: 0px 40px;
    border-top: 1px solid #333;
    padding: 20px 0px;
	font-size: 16px;
}
.ib-content-full p{
	padding: 5px 0px;
}
.ib-preview{
    overflow: hidden;
    position: absolute;
    top: 40px;
    display: none;
}

                            // opens one content item (fullscreen)
                        loadContentItem             = function( $item, callback ) {

                            var hasContentPreview   = ( $('#ib-content-preview').length > 0 ),
                                teaser              = $item.children('div.ib-teaser').html(),
                                content             = $item.children('div.ib-content-full').html(),
                                contentData         = {
                                    teaser      : teaser,
                                    content     : content
                                };

                            if( !hasContentPreview )
                                $('#contentTmpl').tmpl( contentData ).insertAfter( $ibWrapper );

                            //set the returned values and show/animate preview
                            $('#ib-content-preview').css({
                                width   : $item.width(),
                                height  : $item.height(),
                                left    : $item.offset().left,
                                top     : $item.offset().top
                            }).show().animate({
                                width   : $(window).width(),
                                left    : 0
                            }, 500, 'easeOutExpo', function() {

                                $(this).animate({
                                    height  : $(window).height(),
                                    top     : 0
                                }, 400, function() {

                                    var $this   = $(this),
                                        $teaser = $this.find('div.ib-teaser'),
                                        $content= $this.find('div.ib-content-full'),
                                        $close  = $this.find('span.ib-close');

                                    if( hasContentPreview ) {
                                        $teaser.html( teaser )
                                        $content.html( content )
                                    }

                                    $teaser.show();
                                    $content.show();
                                    $close.show();

                                    if( callback ) callback.call();

                                });

                            });

                            if( !hasContentPreview )
                                initContentPreviewEvents(); 

                        },

0 个答案:

没有答案