jQuery的上下滑动我应该怎么办？

StackOverflow https://stackoverflow.com/questions/1239798

  •  11-09-2019
  •  | 
  •  

题

IM不熟悉的jquery所以任何帮助，将理解的是，我有一些代码，（不能记住从那里）示出内容的一部分，然后允许您显示更多或更少。

我想代码做的是什么，现在呢，但不是只显示/隐藏，我希望它滑动向下和向上露出更多或更少的内容。

<强>整个代码 

<!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>Show more less</title>

<style media="screen" type="text/css">
#mytext {width:260px;height:200px;overflow:hidden;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function() {
var adjustheight = 200;
$("#adjust").toggle(function() {
$('#mytext').css('height', 'auto').css('overflow', 'visible');
$(this).text("less");
}, function() {
$('#mytext').css('height', adjustheight).css('overflow', 'hidden');
$(this).text("more");
});
});
</script>

</head>

<body>

<div id="mytext">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque iaculis tincidunt tortor. Nulla turpis dui, gravida non,
varius quis, molestie sit amet, justo. Vestibulum sed elit.
Duis lobortis odio quis nisi. Praesent enim. Sed auctor commodo lectus.
In eget augue a nulla auctor interdum.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nulla enim turpis, commodo at, feugiat nec, dapibus et, odio. Cras enim risus, sagittis eget,
ultrices quis, eleifend vel, risus. Cras a felis eu urna ornare vulputate.
Pellentesque viverra, lacus vitae tincidunt accumsan, nisi metus feugiat felis,
sed placerat est dolor et eros. Duis cursus. Maecenas sollicitudin, lorem vitae
placerat eleifend, dui elit imperdiet tellus, at convallis sapien orci sed pede.</div>
<a href="#" id="adjust">more</a>

</body>
</html>

其目前以任何方式进行动画这种不断变化的高度在CSS控制？感谢

有帮助吗？

解决方案 3

下面有一个伟大的方式来实现我是想才达到。通过在一个格上显示一定量的文本，并能够显示和隐藏文本的另一半有滑动的效果。

HTTP： //sim.plified.com/2008/09/15/sliding-content-from-a-partial-height-with-jquery/

其他提示

让你在的slideToggle 方法？

// Open & Close myDiv.  Animation take 1 second (1000 ms)
$('#myDiv').slideToggle(1000);

修改：这是一个更好的答案

。

在你的HTML，对你总是想看到的东西，一个div，另一个DIV对于那些隐藏的东西。

<div id="alwaysShow">Here is an introduction to what I want to say.</div>
<a href="#" id="adjust">More...</a>
<div id="sometimesShow">Here is some more info that you don't always care about</div>

此方式，您可以切换只需sometimesShow。它不是你问什么的，但我认为这将解决您的问题。

捎带关闭马特的答案的种类，这里是你的HTML：

<div id="alwaysShow">Here is an introduction to what I want to say.</div>
<a href="#" id="adjust">More...</a>
<div id="sometimesShow">Here is some more info.</div>

您的jQuery应该是这样的：

<script type="text/javascript">
    $(document).ready(function() {
        $("#adjust").toggle(function() {
            $("#sometimesShow").slideDown("fast");
            $(this).text("Less...");
        }, function () {
            $("#sometimesShow").slideUp("fast");
            $(this).text("More...");                
        });
    });
</script>

这是一个简单的代码，这将有助于..

<强>只需将代码复制脚本标签内 

 $(document).ready(function() {
            $('#buttontag').click(function(){
                //alert("Here I am ..");
                $('#mytext').slideToggle("fast");
            });
        });

添加此body标签内.. 

<button id="buttontag"> Slide it .. </button>

这肯定会工作.. 但你必须包括jQuery的文件..

http://code.jquery.com/jquery-1.9.1。 min.js

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top