Javascript 如何在Jquery移动页面中从左向右滑动div

我试图在Jquery移动页面中的按钮单击上从左向右滑动div

我想要的是将当前的div推到左边，然后显示另一个div，其内容类似于右边的菜单

我已经创建了一个JSFIDLE。这是你的电话号码

因此，如果你在小提琴中看到每个列表div都有一个gear按钮，那么当你点击这个按钮时，它应该只将该div向左推，并从右显示另一个div，显示一些菜单

我有一个手绘草图，我在这里面

HTML

---

谢谢

我试图借助他人提供的评论来解决自己的问题。这是解决办法

虽然有一点变化，例如我把div改成了li，仅此而已

剧本

HTML

---

for JS FIddle

看看jQuery.animate文档。。我想这就是你要找的。我没看到你的小提琴上有什么关于新唱片的东西。这是我的名片。@MarkRijsmus谢谢兄弟是的，我正在调查。但是我可以使用Jquery的任何一个移动特性来实现这一点吗。也许一个面板可以这样修改？？@AustinMullins谢谢你的想法。好的，我要用新的提琴更新我的小提琴。@Vikram:我试过一些东西。这可能不是你正在寻找的确切解决方案，但你可以继续前进。

<div data-role="page">
    <div id="clock" data-role="header" style=" background:skyblue;">
            <h1>List View</h1>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content" style=" background:orange;">
        <div class="fieldset" id="myform1">List 1 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub2"></a>

        </div>
        <div class="fieldset" id="myform2">List 2 <a class="ui-shadow ui-btn  ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub1"></a>

        </div>
        <div class="fieldset" id="myform3">List 3 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub0"></a>

        </div>
    </div>
    <div data-role="footer">
            <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>

$(document).ready(function () {

    $("#sub2").click(function () {
        // alert("This is an alert");
        $('#myform1').toggle('slide', {
            direction: 'right'
        }, 700);
    });
});

$(".fieldset a").click(function () {
    //var ul_parent= $('li.fieldset').parent();

//$(ul_parent).find('li').each(function(){ //code here });

     $('li.fieldset').each(function(){
        if ($(this).hasClass('rightSlide')) {
        }else{
             var form = '#'+$(this).attr('id');
             var arr = form.split('_');
             var menu = '#menu_' + arr[1];
             var theClass = form;
            console.log("The opened id : "+form);
            toggle(form,menu,theClass);

     }
     });

    var form = '#'+$(this).closest('li').attr('id');
    var arr = form.split('_');
    var menu = '#menu_' + arr[1];
    var theClass = form;
    toggle(form,menu,theClass);
   // console.log(menu);


    function toggle(form,menu,theClass){
    if ($(theClass).hasClass('rightSlide')) {
        $(form).animate({
            "margin-left": "-200px",
                "margin-right": "200px"
        }, "slow").removeClass('rightSlide');
        $(menu).animate({
            "margin-right": "0px"
        }, "slow");
    } else {
        $(form).animate({
            "margin-left": "0px",
                "margin-right": "0px"
        }, "slow").addClass('rightSlide');
        $(menu).animate({
            "margin-right": "-200px"
        }, "slow");

    }
    }

    //$('.hidenset').toggle(400);
});

<div data-role="page">
    <div id="clock" data-role="header" style=" background:skyblue;">
            <h1>List View</h1>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content" style=" background:orange;">
        <ul>
            <li class="fieldset rightSlide" id="myform_1">List 1 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub2"></a>

            </li>
            <li class="hidenset" id="menu_1">Menu 1</li>
            <li class="fieldset rightSlide" id="myform_2">List 2 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub2"></a>

            </li>
            <li class="hidenset" id="menu_2">Menu 2</li>
            <li class="fieldset rightSlide" id="myform_3">List 3 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub2"></a>

            </li>
            <li class="hidenset" id="menu_3">Menu 3</li>
        </ul>
    </div>
    <div data-role="footer">
            <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>

.fieldset {
    height:100px;
    background:green;
    width:100%;
    margin-bottom: 2px !important;
    margin-top: 2px !important;
    color:white;
}
.hidenset {
    background:red;
    margin-top: -103px !important;
    width:180px;
    height:100px;
    margin-bottom: 2px !important;
    margin-right: -200px;
    color:white;
    /*display:none;*/
    float:right;
}
ul {
    list-style-type: none;
    padding-left: 0px;
}
.fieldset a {
    float:right;
    margin-right: 0px !important;
    height: 21px !important;
    width: 21px !important;
    padding-right: 20px !important;
    padding-left: 0px !important;
}