jQuery从右到左滑出函数

Question

我正在尝试使用jQuery从右侧滑出功能，通过修改“从左到右”的代码，但它没有正常运行...您能否请给我正确的方向来修改...

http://jsfiddle.net/egUHv/

目前我正在使用以下代码...

$(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();
    });

});

- user1835490

---

在 JsFiddle 上创建一个示例。 - Jefferson Henrique C. Soares

Answer 1

请看这个链接，它会很有用 http://www.learningjquery.com/2009/02/slide-elements-in-different-directions 或者使用这个。

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

参考资料：

http://docs.jquery.com/UI/Effects/Slide

- Kumar

Answer 2

试试这个: http://jsfiddle.net/egUHv/5/。这个链接可以帮助你。

$(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();
});

});

- Anujith

Answer 3

我们现在拥有 animate.css。

animate.css是一组酷炫、有趣且跨浏览器的动画，可供您在项目中使用。非常适合强调、主页、滑块和增加视觉效果。

您可以从jquery中调用动画效果。整洁而有效。

- Augusto

Answer 4

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

$(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');
            });
        }
    });
});

我们在这里做的事情： 在函数调用时，我们将项目的位置设置为“absolute”，以便轻松地进行动画处理。 我们检查项目是否具有负“right”（已移动到右侧），如果为真，则向后动画回到0（从右到左运动），否则我们会将其动画到“-right”（从左到右运动）。完成动画后，我们将项目的位置设置为“relative”，以便使用其尺寸。

- Martin