Visualizzazione dei risultati da 1 a 1 su 1
  1. #1

    aiuto animatescroll jquery

    Non so come far mostrare i div nascosti con il plug-in animatescroll e jquery al click sul link:

    qui l'html:

    codice:
    <!doctype html><html>
    <head>
    <meta charset="UTF-8">
    <title>Super Super Test</title>
    <link href="css/Super Test.css" rel="stylesheet" type="text/css">
    
    
    <script src="jquery-2.1.0.min.js"></script>
    <script src="animatescroll.js"></script>
    
    
    <style type="text/css">
    
    
    body {
    	background-color: #CCC;}
    </style>
    
    
    
    
    </head>
    <body>
        
    <div id="pagina">
    
    
    	<div id="home">
    		<h1> TEST prima pagina </h1>
            Questa è prima
            <hr>
            <h1><a onclick="$('#articolo').animatescroll({scrollSpeed:2000,easing:'easeOutQuint'});">Avanti ></a></h1>
    	</div>
        
    	<div id="articolo">
            <h1> TEST seconda pagina </h1>
            Questa è la seconda
            <hr>
            <h1><a onclick="$('#home').animatescroll({scrollSpeed:2000,easing:'easeOutQuint'});"> < Indietro</a></h1>
            <h1><a onclick="$('#footer').animatescroll({scrollSpeed:2000,easing:'easeOutQuint'});">Avanti ></a></h1>
    	</div>
        
    	<div id="footer">
            <h1> TEST terza pagina </h1>
            Questo è la terza
            <hr>
            <h1><a onclick="$('#home').animatescroll({scrollSpeed:2000,easing:'easeOutQuint'});"> < Indietro</a></h1>
    	</div>
        
    </div>
    </body>
    </html>

    qui il CSS:

    codice:
    #pagina {    width: 800px;
        height: 800px;
        overflow:hidden;}
     
    #pagina #home {
        width: 800px;
        height: 800px;
        background-color: #2e9422;
    }
    #pagina #articolo {
        width: 800px;
        height: 800px;
        background-color: #e74c3c;
    }
     
    #pagina #footer {
        width: 800px;
        height: 800px;
        background-color: #fffb82;
    }
    a {
        text-decoration: none;
        cursor: pointer;
    }
     
    h1 {
        width: 300px;
        display: inline-block;
    }
    Ultima modifica di AntoIron; 26-01-2014 a 18:39 Motivo: integrazione html

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.