Discussion :

[Ceubex]

Bonjour,

Je réalise une animation sur la page d'accueil d'un site, que vous pouvez voir ici :
http://netsur2.com/PRO/Exafield/

Mon soucis est que comme vous le voyez, les effets d'apparition fonctionnent bien mais à la fin il y a des modifications brutales de la taille les divs orange et verte et ça choque.

Ce que j'aimerais c'est que cela ne se produise pas (les tailles des divs seront initialement les bonnes mais elles seront vides) ou que cette modification soit elle aussi progressive pour que cela soit esthétique.

Mais je n'arrive pas à savoir ce qu'il faut que je change pour que ça fonctionne comme ça

[Darkaurora]

Je dois avoir un problème car je ne vois les divs orange et verte en question... ( du moins la div orange ). De plus lorsque j’inspecte le code c'est un système de tableau sur lequel tu joues avec les animations...

pourrais tu poster le code html et jquery correspondant?

[Ceubex]

En fait les deux div on peut les voir verte et bleu aussi.
Mon code le voici, c'est 2 tableaux qui contiennent les éléments

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="content">
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="c3 column nofloat">
    <tr>
      <td valign="top"><em id="acca">Who are the key German payers?</em>&nbsp;</td>
    </tr>
    <tr>
      <td align="right" valign="top"><em id="accb">What is the role of French nurses in the diabetic patients management? 
      </em>&nbsp;</td>
    </tr>
    <tr>
      <td valign="top"><em id="accc">Exafield has established offices in TOP EU-5 countries, in the US and in Brazil
      </em>&nbsp;</td>
    </tr>
    <tr>
      <td align="right" valign="top"><em id="accd">
Who are the specialists involved in the management of Hep C patients in Italy and Spain?
 
      </em>&nbsp;</td>
    </tr>
    <tr>
      <td valign="top"><em id="acce">What is the equivalence of the UK GUMs specialists in the other European countries?</em>&nbsp;</td>
    </tr>
  </table>
  <br />
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="c1 column nofloat" style="height:350px;">
    <tr>
      <td width="50%" align="center" valign="top"><h3 style="width:600px;" id="accx">For more than 10 years Exafield helps you to understand the different Healthcare systems with the objective of providing you the best quality for your healthcare Fieldwork.
</h3></td>
    </tr>
    <tr>
      <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="33%" align="center" valign="top"><span class="bouton" id="acck">Flexibility</span></td>
          <td width="33%" align="center" valign="top"><span class="bouton" id="accl">Consultancy</span></td>
          <td width="33%" align="center" valign="top"><span class="bouton" id="accm">Quality</span></td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td valign="top" align="center"><h3 style="width:600px;" id="accy">3 words to resume the "Exafield Spirit" and the value shared by all the Exafield people who manage your projects.
 
</h3></td>
    </tr>
  </table>

Pour le jquery, je commence par tout cacher puis je lance la fonction apresOuverture avec des effets successifs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>  
    <script>
$(document).ready(function() {
	//initialisation
	$('#acca').css('display','none');
	$('#accb').css('display','none');
	$('#accc').css('display','none');
	$('#accd').css('display','none');
	$('#acce').css('display','none');
	$('#acck').css('display','none');
	$('#accl').css('display','none');
	$('#accm').css('display','none');
	$('#accx').css('display','none');
	$('#accy').css('display','none');
});
 
function apresOuverture()
{
	$('.content').css("overflow","hidden");
 
 
	//questions
	$('#acca').show('puff',{},500,function()
	{
		$('#accb').show('puff',{},500,function()
		{
			$('#accc').show('puff',{},500,function()
			{
				$('#accd').show('puff',{},500,function()
				{
					$('#acce').show('puff',{},500,function()
					{
						//les 2 h3
						$('#accx').fadeIn(500,function()
						{
							$('#accy').fadeIn(500,function()
							{
								$('#acck').show('drop',{'direction':'down'},800,function()
								{
									$('#accl').show('drop',{'direction':'down'},800,function()
									{
										$('#accm').show('drop',{'direction':'down'},800,function()
										{
											$('.content').css("overflow","auto");
										});
									});
								});
							});
						});
					});
				});
			});
		});
	});
}
 
    </script>

[Darkaurora]

Bah pour moi tout est ok, t div ne change de taille uniquement parce que tu les remplis avec du contenu ce qui est normal. Soit tu augmentes la taille de ta première div celle qui réunis tes tableaux afin d'éviter ta srcollbar, sois tu enlèves $( '.content' ).css( 'overflow', 'auto' ); et tu n'auras pas de scrollbar.

De plus tu as une <p> &nbsp; </p> qui te prends pas mal de place.

[Bovino]

Ceci dit, faire des animations sur des tableaux, c'est toujours un très gros risque de manque de fluidité !
Cela oblige le navigateur à trop de repaint et reflow.