我只想使用jquery向右滑动(水平），而不是切换ul li elemnts

I want only slide right(horizontal) using jquery not toggled ul li elemnts

本文关键字：elemnts li ul 水平 jquery 只想      更新时间：2023-09-26

当我试图写"right"或"left"而不是"toggle"时，我正在尝试向右滑动，但没有工作。它不起作用。请帮帮我我的代码在下面。

<!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>

在此处进行演示：演示

JS代码：

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

您可以尝试在以下位置提供的Sliding解决方案：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.
            }
        );
    });
});
相关文章：