[JQUERY] Effetto bounce

**gaten** · 21-08-2011, 12:40

Salve ragazzi stò cercando di applicare un effetto JQuery alla mia struttura html.

codice:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
	
.sub-menu {display: none;}	

li#vynil {float: left; list-style: none; padding: 5px; }

li#digital {float: left; list-style: none; padding: 5px; }

div#view { clear: both; padding: 20px; }
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="script.js"></script> 
</head>

<body>


<div id="all_releases">

	<div id="sections">
    
    	<ul>
        	<li id="vynil">VYNIL
            <li id="digital">DIGITAL[/list]
    
    </div>

	
	<div id="view">
    	BOX DOVE VISUALIZZARE LE RELEASES
	</div>
    

</div>


</body>
</html>

Praticamente, l'effetto che devo applicare è il seguente:

http://www.gaetanodemitri.altervista...ct/index2.html

Come potete notare, quando clicco vynil escono alcuni contenuti, quando clicco digital altri contenuti. però io dovrei avere la struttura che ho postato precedentemente(cioè vynil e digital devono essere affiancati e poi sotto ho un unico div nel quale i contenuti cambiano in base alla scelta dei pulsanti vynil e digital).

Come potrei risolvere?

Grazie anticipatamente,
gaten

**cavicchiandrea** · 21-08-2011, 14:00

Cerca "tabs" che quello che ti serve al posto di un menu, modificare quello sarebbe complesso e forse impossibile (se nasci tondo non muori quadrato)

**gaten** · 22-08-2011, 10:39

Ho trovato questo, ma quando clicco i pulsanti, il testo dovrebbe apparire con l'effetto bounce.

http://jqueryui.com/demos/tabs/

**gaten** · 22-08-2011, 11:25

Andrea, comunque ho risolto in parte prendendo proprio un esempio consigliato da te(tabs), ora sono arrivato a questo punto, però dovrei aggiungere:

1 - Quando apro la pagina devo applicare l'effetto bounce e visualizzare il contenuto della sezione vynil.

2 - Applicare l'effetto bounce.

Ecco la pagina:

http://www.gaetanodemitri.altervista...u-queness.html

Questo è il codice:

codice:

<!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>
<title>Tab Menu</title>

<script type="text/javascript" src="file:///C|/Users/Gaten/Desktop/jquery-tab-menu - Copia/tabmenu/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {	

  //Get all the LI from the #tabMenu UL
  $('#tabMenu > li').click(function(){
        
    //remove the selected class from all LI    
    $('#tabMenu > li').removeClass('selected');
    
    //Reassign the LI
    $(this).addClass('selected');
    
    //Hide all the DIV in .boxBody
    $('.boxBody div').slideUp('1500');
    
    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
    $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideToggle('1500');
    
  }).mouseover(function() {

    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest    
    $(this).addClass('mouseover');
    $(this).removeClass('mouseout');   
    
  }).mouseout(function() {
    
    //Add and remove class
    $(this).addClass('mouseout');
    $(this).removeClass('mouseover');    
    
  }); 	
});

</script>
<style>


#tabMenu { margin:0;padding:0 0 0 15px;list-style:none; }
#tabMenu li {float:left;cursor:pointer;cursor:hand}

li#digital { padding: 5px; }
li#vynil { padding: 5px; }


.boxBody div { display:none; }
.boxBody div.show {display: block;}
.boxTop { clear:both; }

li.single_rel {clear:both; height: 120px; margin-top: 25px; list-style: none; }


p.title_rel { 
	vertical-align: bottom; 
	float: left; 
	margin-top: 50px; 
	margin-left: 20px; 
	font-family: sans-serif; 
	background:url(file:///C|/Users/Gaten/Desktop/jquery-tab-menu%20-%20Copia/img/bg/bg_title_rel.png) repeat 0 0;; 	
	padding: 5px;
	cursor: pointer;
	}
	
div.section ul {margin: 0; padding: 0; }	

</style>
</head>
<body>

<div>
	<ul id="tabMenu">
	<li id="vynil">VYNIL
	<li id="digital">DIGITAL[/list]

<div class="boxTop"></div>

<div class="boxBody">

  
  <div class="section">
	<ul>
		<li class="single_rel">[img]file:///C|/Users/Gaten/Desktop/jquery-tab-menu - Copia/tabmenu/images/rettangoloHMZ002.jpg[/img]
		<p class="title_rel" title="HMZ001 - Astin &amp; Synthek, Insert Coin continuo del testo che andrebbe fuori."><span class="exit_num">HMZ001</span> - Astin &amp; Synthek, Insert Coin...</p>
		
		
		<li class="single_rel">[img]file:///C|/Users/Gaten/Desktop/jquery-tab-menu - Copia/tabmenu/images/rettangoloHMZ002.jpg[/img]
		<p class="title_rel"><span class="exit_num">HMZ002</span> - Astin &amp; Synthek, Ze Pequeno...</p>
		
		
		<li class="single_rel">[img]file:///C|/Users/Gaten/Desktop/jquery-tab-menu - Copia/tabmenu/images/rettangoloHMZ002.jpg[/img]
		<p class="title_rel"><span class="exit_num">HMZ002</span> - Astin &amp; Synthek, Ze Pequeno...</p>
				
	[/list]
  </div>
  
  
  
  
  <div class="section">
	<ul>
		<li class="single_rel">[img]file:///C|/Users/Gaten/Desktop/jquery-tab-menu - Copia/tabmenu/images/rettangoloHMZ001.jpg[/img]
		<p class="title_rel" title="HMZ001 - Astin &amp; Synthek, Insert Coin continuo del testo che andrebbe fuori."><span class="exit_num">HMZ001</span> - Astin &amp; Synthek, Insert Coin...</p>
		
		
		<li class="single_rel">[img]file:///C|/Users/Gaten/Desktop/jquery-tab-menu - Copia/tabmenu/images/rettangoloHMZ001.jpg[/img]
		<p class="title_rel"><span class="exit_num">HMZ002</span> - Astin &amp; Synthek, Ze Pequeno...</p>
		
		
		<li class="single_rel">[img]file:///C|/Users/Gaten/Desktop/jquery-tab-menu - Copia/tabmenu/images/rettangoloHMZ001.jpg[/img]
		<p class="title_rel"><span class="exit_num">HMZ002</span> - Astin &amp; Synthek, Ze Pequeno...</p>
				
	[/list]
  </div>
  

</div>


</body>
</html>

grazie anticipatamente.

**gaten** · 22-08-2011, 12:39

Sono arrivato a questo punto.

Dovrei solamente applicare l'effetto bounce.

http://www.gaetanodemitri.altervista...enu/index.html

**cavicchiandrea** · 22-08-2011, 15:40

Usando l'effetto "accordion" non credo si possa usare l'effetto elastico

**gaten** · 22-08-2011, 15:56

Come posso applicare allora l'effetto bounce?

Discussione: [JQUERY] Effetto bounce

Strumenti discussione

Ricerca discussione

Visualizza

[JQUERY] Effetto bounce

Permessi di invio