jQuery 3.0.0 alpha 1 est disponible pour des tests
jQuery 3.0.0 alpha 1 est disponible pour des tests
Serveur de code : <script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>.
Je pense qu'il est prématuré de faire une annonce pour une version alpha, mais il y a un point important dont vous pouvez déjà tenir compte dans vos codes.
À partir de jQuery 3, l'instruction CSS "display: none;" est prioritaire sur show() !
Exemple : lorsque le JS anime un fragment du HTML, il est courant de cacher ce fragment pendant le chargement de la page.
Meilleure solution : oublier les méthodes "show/hide" et utiliser une classe "hidden".
Code:
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
| <!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta http-equiv="cache-control" content="public, max-age=60">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<meta name="author" content="Daniel Hagnoul">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
<style>
.hidden { display: none; }
/*#accordion { display: none; }*/
#imgMove { /*display: none;*/ position: relative; left: 600px; z-index: 1; }
.textLimit { width: 580px; }
</style>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<!--<script src="http://code.jquery.com/jquery-migrate-git.js"></script>-->
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
"use strict";
$( function(){ // forme abrégée de $(document).ready(function(){
var jObjImg = $( "#imgMove" );
$( "#accordion" )
//.show() // CSS "none" prioritaire et provoque parfois l'erreur : $(...).show(...).accordion is not a function
.removeClass( "hidden" )
//.css( "display", "block" ) // autre solution
.accordion({
"create" : function ( event, ui ){
$( ui.panel )
.css( "overflow", "hidden" )
.append(
// jObjImg.show().css( "top", "250px" ) // CSS "none" prioritaire
jObjImg
.removeClass( "hidden" )
.css( "top", "250px" )
// autre solution
/*
jObjImg.css({
"display" : "block",
"top" : "250px"
})
*/
);
jObjImg.animate({ "top" : - parseInt( 0.8 * jObjImg.innerHeight(), 10 ) }, 2000 );
},
"beforeActivate" : function( event, ui ){
$( jObjImg, ui.oldPanel ).remove();
},
"activate" : function ( event, ui ){
$( ui.newPanel )
.css( "overflow", "hidden" )
.append( jObjImg.css( "top", "250px" ) );
jObjImg.animate({ "top" : - parseInt( 0.8 * jObjImg.innerHeight(), 10 ) }, 2000 );
}
});
});
$( window ).load( function(){
});
</script>
</head>
<body>
<div id="accordion" class="hidden">
<h3>Section 1</h3>
<div>
<p class="textLimit">
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p class="textLimit">
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
<h3>Section 2</h3>
<div>
<p class="textLimit">
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p class="textLimit">
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
<h3>Section 3</h3>
<div>
<p class="textLimit">
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p class="textLimit">
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
<h3>Section 4</h3>
<div>
<p class="textLimit">
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p class="textLimit">
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
<img id="imgMove" class="hidden" src="http://danielhagnoul.developpez.com/images/imageTest.png">
</body>
</html> |
:fleche: Source
