使用jQueryMobile创建一个平滑的滑动行为，显示一个div

Question

我想要做的是在向右/向左滑动时显示一些内容。 我目前基于简单的事件“在swipeleft上”，但这不会给我我想要的东西。

 $("li").on("swipeleft",function(){
        alert("You swiped left!");
    });

我想在滑动的同时，li本身的内容将向左移动，而当发生这种情况时，将会显示一个固定的div。我希望有人能以正确的方式建议我做到这一点，因为目前正在显示的警报，只有在我完成滑动后才出现，而不是在我做的时候。

Answer 1

你可以绝对定位隐藏的div在左右两侧，然后在滑动动画左/右边距以显示div：

  

<强> DEMO

<li><div class="leftFixed">DIV</div><a href="#">Acura</a><div class="rightFixed">DIV</div></li>

CSS：

.leftFixed {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    background-color: red;
    color: white;
    text-shadow: none;
    z-index: 1;
    display: none;
    text-align: center;
}
.rightFixed {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: 60px;
    background-color: red;
    color: white;
    text-shadow: none;
    z-index: 1;
    display: none;
    text-align: center;
}

ul li a{
    z-index: 100;
}

滑动事件处理程序：

$("li a").on("swiperight",function(){
    $(this).parents("li").find(".leftFixed").show();
    $(this).parents("li").find(".rightFixed").hide();
    $(this).animate({"margin-left": "60px", "margin-right": "0px"}, 200);
});
$("li a").on("swipeleft",function(){
    $(this).parents("li").find(".leftFixed").hide();
    $(this).parents("li").find(".rightFixed").show();
    $(this).animate({"margin-right": "60px", "margin-left": "0px"}, 200);
});