Jquery rauf und runter was soll ich tun?

ich bin nicht vertraut mit jquery so jede Hilfe wäre willkommen, ich habe einige Code, (kann mich nicht erinnern woher), die einen Teil des Inhalts zeigt und dann können Sie mehr oder weniger zeigen.Jquery rauf und runter was soll ich tun?

Was ich möchte, dass der Code genau das tut, was er jetzt tut, aber statt nur show/hide, möchte ich, dass er nach unten rutscht und mehr oder weniger Inhalt enthüllt.

DER GANZE CODE

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

seine derzeit durch Änderung der Höhe in der CSS eine Möglichkeit, dies zu animieren kontrolliert? Danke

Quelle

2009-08-06 Anonymous

Heres eine gute Möglichkeit, zu erreichen, was ich achive fehlte. Durch das Anzeigen einer bestimmten Menge an Text oben in einem div und das Anzeigen und Verbergen der anderen Hälfte des Textes mit einem Folieneffekt.

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

Quelle

2009-08-08 18:33:30

Haben Sie sich die slideToggle Methode angesehen?

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

bearbeiten: Hier ist eine bessere Antwort.

In Ihrem HTML haben Sie ein div für das Zeug, das Sie immer sehen wollen, und ein anderes div für die Dinge, die versteckt sind.

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

Auf diese Weise können Sie einfach sometimesShow wechseln. Es ist nicht genau das, wonach Sie gefragt haben, aber ich denke, es wird Ihr Problem lösen.

Quelle

2009-08-06 15:48:57

Ja, es geht verrückt, im nicht sicher, wo Sie den Code setzen, es belebt es Gleiten aber scheint nicht zu sehen in der Höhe usw. und nur ganz nach oben, so dass kein Text sichtbar ist. –

Um zu verdeutlichen, wenn es nach oben fährt, wollen Sie immer noch die oberen 200px des div sehen (wie in Ihrem CSS angegeben)? –

yea wenn Seite lOOds 200px Inhalt sollte sichtbar sein, dann drücken Sie "mehr" sollte nach unten schieben, um den gesamten Inhalt in "MyText" Div, mehr Text ändert sich zu "weniger" und wenn gedrückt, schieben Sie hoch, aber immer noch zeigt 200px Inhalt . –

Art von Matts Antwort von Huckepack off, hier ist Ihre 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>

Ihre jQuery sollten wie folgt aussehen:

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

Quelle

2009-08-06 16:54:38 Jason

Das sind alles großartige, aber es wäre noch besser, wenn es möglich wäre, mit einem div zu arbeiten, ohne den Inhalt zu trennen, schlecht zu sehen, was irgendjemand sonst mit sich bringt, also danke für deine Zeit und Mühe. –

Dies ist ein einfacher Code, ..

Kopieren Sie einfach den Code in Script-Tag

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

dieses .. innerhalb des Body-Tag hinzufügen helfen würde

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

Diese

funktionieren würde auf jeden Fall .. aber man muss die Jquery-Datei enthalten ..

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

Quelle

2013-02-15 16:08:41 Gifted

Jquery rauf und runter was soll ich tun?

Antwort

Verwandte Themen