Javascript jQuery从右向左滑动函数

我试图在jQuery中通过更改“从左到右”的代码从右侧滑出函数，但它不能正常工作。。。你能告诉我修改的正确方向吗

目前我正在使用这个代码

$(function() {
    $('#nav').stop().animate({'marginRight':'-100px'},1000);

    function toggleDivs() {
       var $inner = $("#nav");
       if ($inner.position().right == "-100px") {
           $inner.animate({right: 0});
           $(".nav-btn").html('<img src="images/slide-out.png" alt="open" />')
       }
       else {
           $inner.animate({right: "100px"}); 
           $(".nav-btn").html('<img src="images/slide-out.png" alt="close" />')
       }
    }
    $(".nav-btn").bind("click", function(){
        toggleDivs();
    });

});

$（函数（）{
$（'#nav'）.stop（）.animate（{'marginRight'：'-100px'}，1000）；
函数toggleDivs（）{
var$内部=$（“资产净值”）；
如果（$inner.position（）.right==“-100px”）{
$inner.animate（{right:0}）；
$（“.nav btn”）.html（“”）
}
否则{
$inner.animate（{右：“100px”}）；
$（“.nav btn”）.html（“”）
}
}
$（“.nav btn”）.bind（“单击”，函数（）{
toggleDivs（）；
});
});

一个非常简单的解决方案：

$(function() {
  $('#div').ToggleSlide();
});

$.fn.ToggleSlide = function() {
    return this.each(function() {
        $(this).css('position', 'absolute');

        if(parseInt($(this).css('right')) < 0) {
            $(this).animate({ 'right' : '-100px' }, 1000, function() {
                $(this).css('position', 'relative');
            });
        }
        else {
            $(this).animate({ 'right' : '0px' }, 1000, function() {
                $(this).css('position', 'relative');
            });
        }
    });
});

$（函数（）{
$（'#div'）。切换幻灯片（）；
});
$.fn.ToggleSlide=函数（）{
返回此值。每个（函数（）{
$（this.css（'position'，'absolute'）；
if（parseInt（$（this.css（'right'））<0）{
$（this.animate（{'right'：'-100px'}，1000，function（）{
$（this.css（'position'，'relative'）；
});
}
否则{
$（this）.animate（{'right'：'0px'}，1000，function（）{
$（this.css（'position'，'relative'）；
});
}
});
});

我们在这里所做的： 在函数调用中，我们将项目的位置设置为“绝对”，这样我们可以轻松地设置动画。

---

我们检查项目是否具有负“right”（已向右移动），如果为真，我们将动画设置回0（从右到左的运动），否则我们将动画设置为“-right”（从左到右的运动）。动画完成后，我们将项目的位置设置为“相对”，以便使用其尺寸。

只需查看此链接，它将非常有用

还是用这个

$("div").click(function () {
          $(this).show("slide", { direction: "left" }, 1000);
    });

参考资料：

试试这个：

$（函数（）{
$（'#nav'）.stop（）.animate（{'margin-right'：'-100px'}，1000）；
函数toggleDivs（）{
var$内部=$（“资产净值”）；
如果（$internal.css（“右边距”）==“-100px”）{
$inner.animate（{'margin-right'：'0'}）；
$（“.nav btn”）.html（“”）
}
否则{
$inner.animate（{'margin-right'：“-100px”}）；
$（“.nav btn”）.html（“”）
}
}
$（“.nav btn”）.bind（“单击”，函数（）{
toggleDivs（）；
});
});

我们现在有了

css是一组非常酷、有趣的跨浏览器动画，供您在项目中使用。非常适合于强调、主页、幻灯片和一般性的添加水元素

---

可以从jquery调用动画效果。干净有效

在JSFIDLE上创建一个示例

$(function() {
$('#nav').stop().animate({'margin-right':'-100px'},1000);

function toggleDivs() {
var $inner = $("#nav");
if ($inner.css("margin-right") == "-100px") {
    $inner.animate({'margin-right': '0'});
    $(".nav-btn").html('<img src="images/slide-out.png" alt="open" />')
}
else {
    $inner.animate({'margin-right': "-100px"}); 
    $(".nav-btn").html('<img src="images/slide-out.png" alt="close" />')
}
}
$(".nav-btn").bind("click", function(){
    toggleDivs();
});

});