因此,我可以在计算机上正常使用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();
},