jQuery는 위아래로 아래로 슬라이드해야합니다. 어떻게해야합니까?

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

  •  11-09-2019
  •  | 
  •  

문제

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

그녀는 내가 성취하고자하는 것을 달성하는 좋은 방법입니다. 하나의 div에서 상단에 일정량의 텍스트를 표시하고 슬라이드 효과로 텍스트의 나머지 절반을 보여주고 숨길 수 있습니다.

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. 정확히 당신이 요청한 것은 아니지만 문제가 해결 될 것이라고 생각합니다.

Matt의 답변에서 돼지 백의 종류, 여기에 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");
            });
        });

바디 태그 안에 이것을 추가하십시오 ..

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

이것은 확실히 효과가있을 것입니다 .. 그러나 당신은 jQuery 파일을 포함해야합니다 ..

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top