我只想使用 jquery 向右滑动（水平）而不是切换 ul li 元素答案

【问题标题】：I want only slide right(horizontal) using jquery not toggled ul li elemnts我只想使用 jquery 向右滑动（水平）而不是切换 ul li 元素
【发布时间】：2013-07-26 05:37:09
【问题描述】：

我正在尝试向右滑动但不工作，当我尝试写“右”或“左”而不是“切换”时。它不工作。请帮帮我我的代码如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul').hide();

});
function next(){

$('ul').animate({width: 'toggle'}, 1000);
}
</script>
<style>
ul{height:30px; overflow: hidden; }
ul li{ display: inline-block; padding: 10px; }
</style>
</head>

<body><p onclick="next()">next</p>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>

</body>
</html>

【问题讨论】：

标签： php javascript jquery mysql css

【解决方案1】：

这里的工作演示：Demo

JS代码：

$(document).ready(function(){
    $("ul").hide();
    $("p").click(function(){        
           $("ul").show("slide",{direction: 'right'})
    });

});

【讨论】：

你好，web2008，这行得通，但是你能建议从左到右吗，它从右到左滑动
改变方向形式从右到左如下图：$("ul").show("slide",{direction: 'left'})
我已经在我的 localhost 中测试过它，但不能在 localhost 上运行，它在 fiddle 上运行良好，但不能在 localhost 上运行。请给我建议。
你是否包含了 JQUERY UI js 文件？
告诉我如何包含它，我不知道

【解决方案2】：

您可以尝试以下网址提供的滑动解决方案：jQuery .slideRight effect

$(document).ready(function() {
    $('#slider').click(function() {
        $(this).animate(
            {
                'margin-left':'1000px'
                // to move it towards the right and, probably, off-screen.
            },1000,
            function() {
                $(this).slideUp('fast');
                // once it's finished moving to the right, just 
                // removes the the element from the display, you could use
                // `remove()` instead, or whatever.
            }
        );
    });
});

【讨论】：