Question

我试图在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();
    });

});

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（从右到左的动作），否则我们动画为'-right'（从左到右的动作））。动画完成后，我们将项目的位置设置为“相对”，以便我们可以使用它的尺寸。

Answer 4

我们现在有了animate.css

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

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

jQuery SlideOut功能从右到左

4 个答案: