JQuery скользить вверх и вниз, что я должен делать? - PullRequest
Новая
       36

JQuery скользить вверх и вниз, что я должен делать?

0 голосов
/ 06 августа 2009

Я не знаком с 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 ]

1 голос
/ 06 августа 2009

Что-то вроде совмещения ответа Мэтта, вот ваш 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>
1 голос
/ 08 августа 2009

Вот отличный способ достичь того, чего я хотел достичь. Благодаря отображению определенного объема текста в верхней части одного элемента и возможности показать и скрыть другую половину текста с помощью эффекта слайда.

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

1 голос
/ 06 августа 2009

Вы ознакомились с методом 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. Это не совсем то, что вы просили, но я думаю, что это решит вашу проблему.

0 голосов
/ 15 февраля 2013

Это простой код, который поможет ..

Просто скопируйте код внутри тега 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

...