Comment faire pour ouvrir le contenu d'ouverture avec jquery

Mon concepteur m'a remis un design Je ne suis pas sûr à 100% comment faire avec jquery et css. Je suis fondamentalement en train d'essayer de permettre à un utilisateur de "glisser" le pied vers le haut pour révéler plus de conent.Comment faire pour ouvrir le contenu d'ouverture avec jquery

Mon html ..

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

J'ai un bouton à bascule qui onclick

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

Cette glisse le, glisse alors le contenu de bas de page en expansion ouverte vers le bas en arrière jusqu'à fermer. Je voudrais qu'il glisse et se ferme ensuite.

Merci

Source

2008-12-12 studiothat

Vous pouvez exploiter les effets de JQuery UI 1.6 (Effects Demo Page). Ce qui suit a accompli l'effet désiré pour moi.

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

Remarque: Vous pouvez jouer avec le paramètre d'accélération pour obtenir le lissage souhaité de l'effet. Pour ce faire, vous devez disposer des dernières versions de JQuery et de JQuery UI Slide Effect.

Source

2008-12-12 19:07:52 Manik

Essayez quelque chose comme ceci:

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

Source

2008-12-12 18:45:21 cLFlaVA

Ma solution est un peu un truc. La fonction slideUp() comme vous le souhaitez n'est pas construite dans JQuery car la façon dont vous pouvez l'obtenir dépend de votre conception html/css. Le débit normal est de haut en bas.

Je propose ceci:

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

Ce code est juste un exemple. Déplacez le css en ligne vers une feuille externe. Idem pour le javascript.

Si vous souhaitez que la div 'slide' disparaisse, ajoutez un rappel à la fonction slideToggle() appelez hide() sur la div 'slide'.

Source

2008-12-12 18:51:53

Comment faire pour ouvrir le contenu d'ouverture avec jquery

Répondre

Questions connexes