Effet de fondu .load

Version imprimable

Bonjour à tous!

En cherchant à rendre mon projet un poil plus design, je suis tombé sur l'AJAX et sa fonction .load. Je voulais juste charger le contenu des pages du site sans en changer, et cela m'est apparu comme une solution acceptable (si vous avez d'autres idées, je suis preneur en mp.....).

Bref, le code fonctionne pour l'essentiel, le .load fait ce qu'il doit faire. J'ai donc décidé d'ajouter un petit effet de fondu, et c'est là que ça coince. En effet, je part d'une page avec un simple header et un Lorem Ipsum en dessous pour arriver à une page avec une image et un header. Hors, l'image de la page maj1.html se charge direct, et c'est le header qui apparait en fondu. Qu'ai-je loupé? Je voudrais que toute la page index.html s'efface en fondu et laisse apparaitre maj1.html.

Merci d'avance à ceux qui pourront solutionner mon problème :)

Index.html

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
<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="css_Ajax.css">
    </head>
<body>
    <header>
        <h1>Feather</h1>
    </header>
        <div class= "nav_content">
    <button id="start_button">Commencer le voyage</button>
        <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus varius velit volutpat tristique. Maecenas mollis pulvinar elementum. Nullam condimentum ligula tellus, at eleifend sapien accumsan ut. Etiam ipsum ligula, efficitur a lorem a, maximus dictum turpis. Proin id lectus at ligula iaculis posuere. Etiam vel sapien id orci ultricies commodo at non eros. Morbi dignissim purus dictum tempus laoreet. Aenean dictum purus vel pulvinar posuere. Cras eget porttitor enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
 
Mauris luctus neque quis dignissim imperdiet. In id tempor dui, id eleifend turpis. Phasellus ac ultricies massa. Cras maximus scelerisque tellus, a euismod purus luctus eget. Nam sagittis, urna vitae molestie finibus, odio nibh faucibus felis, ut suscipit felis nisi eu mi. Proin vel diam nec arcu maximus tempor vel vel magna. Donec non nibh mollis, rhoncus eros non, ultricies justo. Aliquam in pretium elit, sed volutpat nisi.
 
Mauris id mi vitae urna suscipit tempor. Nulla bibendum est et ligula tincidunt lacinia. Nulla eget auctor orci, semper porta ex. Aenean in sem a erat hendrerit molestie ut non justo. Donec gravida a enim in euismod. Quisque mollis gravida purus in eleifend. Suspendisse tristique lorem purus. Morbi interdum varius mauris facilisis vehicula. Proin a tortor vel erat malesuada varius ut at est. Praesent pellentesque pharetra consectetur. Aliquam erat volutpat. Etiam vehicula congue ipsum, varius dapibus urna fermentum in.
 
Aenean pellentesque mauris at sapien luctus, quis rhoncus elit fermentum. Cras at elementum augue, nec commodo nisl. Vestibulum vel iaculis elit. Duis id odio vel eros pharetra porttitor et eleifend ante. Sed id ligula ac diam porttitor facilisis in quis ligula. Maecenas ullamcorper elit magna, quis ultricies nibh porta congue. Sed sit amet malesuada neque. Praesent eget porttitor nisl. Phasellus non euismod augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean molestie ut nisi ac sollicitudin. Vestibulum sagittis eleifend laoreet. Maecenas venenatis dapibus nisi in pretium. Nam iaculis eros et tortor blandit posuere.
 
Morbi sit amet massa eget nibh sagittis pellentesque non a metus. In vestibulum dui sit amet quam volutpat, id sagittis erat ornare. Aliquam magna nisi, posuere eu massa sed, condimentum hendrerit est. Ut interdum at magna id pharetra. Aliquam id facilisis libero, facilisis pretium lectus. Sed ac lorem eget ligula facilisis aliquam. Suspendisse vulputate eget sapien sit amet interdum. Sed tempor eros et metus cursus lobortis. Duis dictum rhoncus diam sed sollicitudin.
 
Nulla eleifend turpis vitae sem facilisis facilisis. Donec lobortis, velit et laoreet porttitor, risus neque blandit odio, quis condimentum orci quam eget lectus. Integer dictum ipsum a quam laoreet vulputate. Vestibulum tempus eros ac enim vestibulum pharetra. Proin eleifend quam sit amet mi finibus imperdiet. Phasellus consequat eros at augue dictum, quis laoreet dui semper. Proin aliquet placerat nisl. Suspendisse dapibus, eros non placerat blandit, risus felis egestas lorem, interdum vehicula lorem libero eu orci. Aliquam faucibus efficitur porttitor. Nunc pharetra quam sed ullamcorper scelerisque. Vestibulum rutrum ultrices massa, at convallis dolor rutrum eu.</p>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script>
        $(function() {
            $("#start_button").click(function() {
                $(".nav_content").fadeOut(4000);
        $(".nav_content").load("maj1.html", function(){
            $(this);
        });
    });
        });
        </script>
    </body>
</html>

maj1.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="css_maj1.css"/>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
   <img src="bg%20plume.jpeg" />
 
 
</body>
</html>

Exemple :

Fichier maj1.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta http-equiv="cache-control" content="public, max-age=60">
    <meta charset="utf-8">
</head>
<body>
    <div id="load">
        <img src="http://www.123fleurs.com/img/products/full/bouquet-rond-wax-flowers-rose-fleur-lisianthus-arum-orange-jaune-multicolore_17547.jpg" />
    </div>
</body>
</html>

Fichier index.html

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
<!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>
    <style>
 
 
    </style>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script>
        "use strict";
 
$( function(){ // forme abrégée de $(document).ready(function(){
 
    $( "#start_button" ).on( "click", function( ){
        var jObj = $( "#nav_content" );
 
        jObj.fadeOut( 4000, function( ){
            jObj.load( "maj1.html #load", function( ){
                jObj.fadeIn( 4000 );
            });
        });
    });
 
});
 
$( window ).load( function(){
 
 
});
 
    </script>
</head>
<body>
 
    <header>
        <h1>Feather</h1>
    </header>
 
    <div id="nav_content">
        <button id="start_button">Commencer le voyage</button>
        <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus varius velit volutpat
        tristique. Maecenas mollis pulvinar elementum. Nullam condimentum ligula tellus, at eleifend sapien
        accumsan ut. Etiam ipsum ligula, efficitur a lorem a, maximus dictum turpis. Proin id lectus at ligula
        iaculis posuere. Etiam vel sapien id orci ultricies commodo at non eros. Morbi dignissim purus dictum
        tempus laoreet. Aenean dictum purus vel pulvinar posuere. Cras eget porttitor enim. Vestibulum ante
        ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
    </div>
 
</body>
</html>

22/02/2015, 19h27
LuluHow

Cela fonctionne niquel chrome! Sans vouloir abuser, aurais-tu la gentillesse de m'expliquer ton script, en MP? Je débute dans le développement web, et le jQuery est pour l'instant assez mystérieux, et j'aime bien comprendre ce que je mets dans mon code :)

En tous cas, merci beaucoup, résolu donc.

C'est re moi :)

Grâce à sieur DanielHagnoul, le script fait maintenant ce qu'il était censé faire, mais un nouveau problème est apparu. En effet, il fonctionne parfaitement sous Safari, pas très bien avec Mozilla, et Chrome nécessite que je déplace la souris pour que la page maj1 apparaisse. Que dois-je modifier pour que ça tourne sur tous les navigateurs?
Je remets le code actuel.

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
 
<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="css_Ajax.css">
    <meta charset="utf-8">
    <title>Feather, site d'écriture communautaire</title>
    <style>
 
 
    </style>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script>
        "use strict";
 
$( function(){ 
 
    $( "#start_button" ).on( "click", function( ){
        var jObj = $( "html" );
 
        jObj.fadeOut( 2000, function( ){
            jObj.load( "maj1.html", function( ){
                jObj.fadeIn( 2000 );
            });
        });
    });
 
});
 
$( window ).load( function(){
 
 
});
 
    </script>
</head>
<body>
 
    <header>
        <h1>Feather</h1>
    </header>
 
    <div id="nav_content">
        <div id="border_button">
            <button id="start_button"><h2>Commencer le voyage</h2></button>
        </div>
    </div>
 
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="css_maj1.css">
    <meta charset="utf-8">
    <title>Feather, accueil</title>
</head>
<body>
    <header>
        <h1>Feather</h1>
    </header>
    <p>JE SUIS LA</p>
</body>
</html>

25/02/2015, 21h56
danielhagnoul

Votre code n'a plus rien à voir avec le mien. On doit agir sur un élément du DOM inclus dans "body" ou sur "body" : var jObj = $( "body" );
03/03/2015, 18h00
LuluHow

Merci de ta réponse, après tâtonnement, tout fonctionne très bien, merci encore!