使用jQuery向左/向右滑动div_Jquery

使用jQuery向左/向右滑动div

jquery

使用jQuery向左/向右滑动div,jquery,Jquery,我在多个地方发现了以下代码，可以左/右滑动： $('#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.

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

$('#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>


$（文档）.ready（函数（）{
$（“#测试”）。单击（函数（）{
$（'hello'）.hide（'slide'，{direction:'left'}，1000）；
});
});
你好
试验

我在Chrome和Safari中试用过，但都不起作用

有什么问题？是否有其他工作方法可以向左/向右滑动？

$（'hello'）.hide（'slide'，{direction:'left'}，1000）需要jQuery ui库。请参见
无需使用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');
    }
    });
});

试试这把小提琴：
最简单的方法是使用和动画库。


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文件：）
$（文档）.ready（函数（）{
$（“#左”）。在（'click'，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
$（'#left'）.hide（“slide”，{direction:“left”}，500，function（）{
$（'#right'）.show（“幻灯片”{direction:“right”}，500）；
});
});
$（“#右”）。在（'click'，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
$（'#right'）。隐藏（“幻灯片”{direction:“right”}，500，函数（）{
$（'#left'）.show（“幻灯片”{direction:“left”}，500）；
});
});
})

你好，我要去左边隐藏，然后从左边回来展示
你好，我是从右边来的，我会回到右边躲起来
我不认为这是最干净的方法，但效果并不好。但是，我需要设置overflow-x:hidden好极了！css和JQuery是一种超级干净、简单的动画制作方法。