0

我不熟悉 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中的高度来控制它有什么动画效果吗？谢谢

4

4 回答 4

1

你看过 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。它不完全符合您的要求，但我认为它会解决您的问题。

于 2009-08-06T15:48:57.240 回答
1

有点捎带马特的回答，这是你的 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>
于 2009-08-06T16:54:38.420 回答
1

这是实现我想要实现的目标的好方法。通过在一个 div 的顶部显示一定数量的文本，并能够通过幻灯片效果显示和隐藏另一半文本。

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

于 2009-08-08T18:33:30.843 回答
0

这是一个简单的代码，可以帮助..

只需复制脚本标签内的代码

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

于 2013-02-15T16:08:41.387 回答