使用jQuery向左/向右滑动div答案

【问题标题】：Slide div left/right using jQuery使用jQuery向左/向右滑动div
【发布时间】：2017-07-20 16:50:29
【问题描述】：

我在多个地方发现以下代码可以左右滑动：

$('#hello').hide('slide', {direction: 'left'}, 1000);

但是，我无法让它工作。这是我正在尝试的简约测试：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    $(document).ready(function() {
        $("#test").click(function() {
            $('#hello').hide('slide', {direction: 'left'}, 1000);
        });
    });
   </script>
</head>
<body>
    <article >
        <div id="hello">
            Hello       
        </div>
        <p><span id="test">Test</span>
    </arcticle>
</body>

我在 Chrome 和 Safari 中尝试过，但它不起作用。

有什么问题？还有其他的左右滑动的工作方式吗？

【问题讨论】：

That's because Slide is part of the jQuery UI Effects.

标签： jquery

【解决方案1】：

不使用 jQueryUI 也可以轻松实现，例如：

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "slow").addClass('visible');
    }
    });
});

试试这个工作小提琴：

http://jsfiddle.net/ZQTFq/

【讨论】：

我认为这不是最干净的方法，但它的作用就像一个魅力。但是，我需要设置overflow-x: hidden;

【解决方案2】：

$('#hello').hide('slide', {direction: 'left'}, 1000); 需要 jQuery-ui 库。见http://www.jqueryui.com

【讨论】：

【解决方案3】：

最简单的方法是使用 jQuery 和 animate.css 动画库。

Javascript

/* --- Show DIV --- */
$( '.example' ).removeClass( 'fadeOutRight' ).show().addClass( 'fadeInRight' );

/* --- Hide DIV --- */
$( '.example' ).removeClass( 'fadeInRight' ).addClass( 'fadeOutRight' );

HTML

<div class="example">Some text over here.</div>

很容易实现。只是不要忘记在标题中包含 animate.css 文件:)

【讨论】：

太棒了！ Animate.css 和 JQuery 是一种超级干净和简单的动画制作方式。

【解决方案4】：

$(document).ready(function(){
$("#left").on('click', function (e) {
        e.stopPropagation();
        e.preventDefault();
        $('#left').hide("slide", { direction: "left" }, 500, function () {
            $('#right').show("slide", { direction: "right" }, 500);
        });
    });
    $("#right").on('click', function (e) {
        e.stopPropagation();
        e.preventDefault();
        $('#right').hide("slide", { direction: "right" }, 500, function () {
            $('#left').show("slide", { direction: "left" }, 500);
        });
    });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div style="height:100%;width:100%;background:cyan" id="left">
<h1>Hello im going left to hide and will comeback from left to show</h1>
</div>
<div style="height:100%;width:100%;background:blue;display:none" id="right">
<h1>Hello im coming from right to sho and will go back to right to hide</h1>
</div>

$("#btnOpenEditing").off('click');
$("#btnOpenEditing").on('click', function (e) {
    e.stopPropagation();
    e.preventDefault();
    $('#mappingModel').hide("slide", { direction: "right" }, 500, function () {
        $('#fsEditWindow').show("slide", { direction: "left" }, 500);
    });
});

它会像魅力一样工作，看看演示。

【讨论】：