Wie rutschen Inhalte mit jquery öffnen

Mein Designer übergab mir einen Entwurf Ich bin nicht 100% sicher, wie man mit jQuery und CSS zu tun. Ich versuche grundsätzlich, einem Benutzer zu ermöglichen, die Fußzeile nach oben zu verschieben, um mehr Inhalt anzuzeigen.Wie rutschen Inhalte mit jquery öffnen

Meine html ..

<div id="footer"> 
    <div id="expandingFooter"> hidden content</div> 
     content that is always visible 
</div>

Ich habe einen Umschaltknopf, die

Onclick

$('#expandingFooter').slideToggle();

Dies schiebt den Ausbau Fußzeile Inhalt nach unten offen, dann nach oben gleitet wieder zu schließen. Ich möchte es nach oben schieben und dann schließen.

Dank

Quelle

2008-12-12 studiothat

Sie können die Effekte von JQuery UI 1.6 (Effects Demo Page) nutzen. Das Folgende vollbrachte den gewünschten Effekt für mich.

$('#toggleButton').bind('click', function(e) { 
    $('#expandingFooter').toggle(
     'slide', 
     { easing: 'easeOutQuint', direction: 'down' }, 
     1000 
    ); 
});

Hinweis: Sie können mit dem Beschleunigungsparameter spielen, um die gewünschte Weichheit des Effekts zu erhalten.

Sie müssen dazu die neuesten Versionen von JQuery und JQuery UI Slide Effect haben.

Quelle

2008-12-12 19:07:52 Manik

versuchen, etwas wie folgt aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <title>Untitled</title> 
    <script type="text/javascript" src="shared-scripts/jquery-1.2.4b.js"></script> 
    <script type="text/javascript"> 
    <!-- 
    $(document).ready(function(){ 
    $("#footer").click(function() { 
     if ($("#expandingFooter").is(":hidden")) { 
     $("#expandingFooter").show("slow"); 
     } else { 
     $("#expandingFooter").slideUp(); 
     } 
    }); 
    $("#expandingFooter").hide(); 
    }); 
    //--></script> 

</head> 

<body> 
<div id="footer"> 
    <div id="expandingFooter"> hidden content</div> 
     content that is always visible 
</div> 
</body> 
</html>

Quelle

2008-12-12 18:45:21 cLFlaVA

Meine Lösung ist ein bisschen ein Trick. Die Funktion slideUp(), so wie Sie es möchten, wird nicht in JQuery erstellt, da die Art und Weise, wie Sie es erreichen können, von Ihrem HTML/CSS-Design abhängt. Normaler Fluss ist von oben nach unten.

Ich schlage vor, diese:

<a id="toggle">Toggle()</a> 

<div id="slide" style="position:relative; height: 100px"> 

    <div id="slideInner" style="position:absolute; bottom: 0; background: lightblue""> 
     <p>Suspendisse potenti. Vivamus libero. Dummy Text</p> 
    </div> 

</div> 


<script type="text/javascript"> 
    $('.hoverable').hover(function() { $(this).find("div").show(); }, 
         function() { $(this).find("div").hide(); }); 

    $('#toggle').click(function() { 
     $('#slideInner').slideToggle(); 
    }); 
</script>

Dieser Code ist nur ein Beispiel. Verschieben Sie die Inline-CSS auf ein externes Blatt. Idem für das Javascript.

Wenn Sie möchten, dass das Diver "slide" verschwindet, fügen Sie der Funktion slideToggle() einen Callback hinzu. Hide() auf dem Schieberegler "div".

Quelle

2008-12-12 18:51:53

Wie rutschen Inhalte mit jquery öffnen

Antwort

Verwandte Themen