javascript - jQuery SlideOut 函数从右到左

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

});

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

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

});

Answer 3

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

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

我们在这里做什么：在函数调用中，我们将项目的位置设置为“绝对”，这样我们就可以轻松地对其进行动画处理。我们检查项目是否有负“右”（已经向右移动），如果为真，我们动画回到 0（从右到左运动），否则我们动画到“-右”（从左到右运动） ）。动画完成后，我们将项目的位置设置为“相对”，以便我们可以使用它的尺寸。

Answer 4

我们现在有了animate.css

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

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