jQuery 3.0.0 alpha 1 est disponible pour des testsServeur 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 : | Sélectionner tout |
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> |
Source 
Envoyé par psychadelic
