Jquery Mobile转场特效之slide-优快云博客

本文链接：https://blog.youkuaiyun.com/hqmln/article/details/84693865

本文介绍如何在JQuery Mobile中实现从左向右的滑动转场效果，通过设置data-direction=reverse和reverse:true参数来改变默认的滑动方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Jquery Mobile页面转场有诸多特效，其中slide是滑动效果，确切说是从右向左滑动，在项目中使用时，如果有从右向左滑动，那么再加上“返回”的从左向右的滑动就有更好的体验了，由于jquery mobile没有特定的从左向右滑动的关键词，下面说下这种特效的实现方式。

本来的从右向左滑动的特效的slide的写法：

<a href="#day_report_3" data-transition="slide">Next</a>

$('#day_report_5').bind( 'swipeleft', function( e ) {     
    $.mobile.changePage("#day_report_1",{transition: "slide",changeHash: true});     
    e.stopImmediatePropagation();      
    return false;    
   } );

从左向右的slide特效的写法：

<a href="#day_report_2" data-transition="slide" data-direction=”reverse”>Next</a>

$('#day_report_5').bind( 'swiperight', function( e ) {     
    $.mobile.changePage("#day_report_4",{transition: "slide",reverse:"true",changeHash: true});     
    e.stopImmediatePropagation();      
    return false;    
   } );

在<a> 中设置data-direction=”reverse”，在$.mobile.changePage中设置reverse:"true",这样设置后的结果是转场特效反向，也就实现了我们需要的效果了。