Non-compatibilité entre effet toggle (avec UI 1.8.16) et fadeIn (avec jQuery 1.6.2)

exilquery · 24/08/2011, 11h03

Bonjour,

J'ai mis un effet fadeIn via jQuery 1.6.2 et cela marche bien sur les éléments désignés (logo, titres).
Après j'ai ajouté un effet toggle via jQuery UI 1.8.16 et cela marche également, mais du coup le fadeIn dont je parle précédemment marche moins bien (plus rapide et vraiment pas esthétique). Je pourrais changer la duration du fadeIn mais ça ne me dit pas la source du problème, et je n'ai pas exactement l'effet fadeIn initialement recherché.

Après recherche, c'est la présence même de la ligne :
<script type="text/javascript" src="jsui/jquery-ui-1.8.16.custom.min.js"></script> qui gêne le fadeIn (et même si le code pour le toggle n'est pas encore écrit).

J'ai vu sur le forum qu'il pouvait y avoir des conflits entre effets (mouseover par ex) mais mes éléments liés au toggle et au fadeIn restent quand même indépendants...
Est-ce un souci de noconflict ? pourtant mon souci concerne deux librairies jQuery (pas mootools ou scriptaculous par ex). Cependant j'ai aussi lu que la dernière version de UI était censée améliorer la compatibilité avec jQuery 1.6.2 : cela signifie que ces deux éléments peuvent réellement entrer en conflit ?

Le code :

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
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_css.css" type="text/css" />
 <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.16.custom.css" media="screen" />
 <link href="/sitejoomla/templates/mybusiness/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
 <script type="text/javascript" src="jsui/jquery-ui-1.8.16.custom.min.js"></script>
</head>
<body>
 
<script type="text/javascript"> 
 
  $(document).ready(function(){
   $('#tabs').tabs( {  
   fx: {opacity: 'toggle', duration:700}     
  });
  });
 
</script>
 
<script type="text/javascript">
 
  $(document).ready(function(){
 
  $('.spotlight').hide();
  $('.spotlight').fadeIn(2000);
 
  $('#logo').hide();
  $('#logo').fadeIn(2000);
 
  $('h2').hide();
  $('h2').fadeIn(2000);
 
  });
 
</script>

En vous remerciant.

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email