Creation de div qui ne dure pas

Bonjour,

J'ai ce code :
Code:

1 2 3 4 5 6 7 $("#lien").click(function(){ $(this).append('<div id="alert_charger">Donnée chargée</div>') $('#alert_charger').css({background:'#fff',position:'fixed','margin': '0 auto','z-index':100000,border: 'solid 3px #F43D3E', width: '300px' }) $('#alert_charger').hide("slow"); });
Mon souci est quand je clique sur le lien pour lancer ce code le div génére ne dur pas il est disparait de suite a cause du hide donc j'aimerais savoir si il est possible de faire une sorte de pause entre la creation et le hide du div ?

Merci a vous

Bonsoir.

Après quelques petites corrections, voici un exemple avec un délai de 3,5s (modifiable) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
    <script type="text/javascript">
        $(document).ready(function(){
 
            $("#lien").click(function(){
                $(this).append('<div id="alert_charger"><p>Donn&eacute;e charg&eacute;e</p></div>');
 
                $('#alert_charger').css({
                    background:'#ffffff',
                    position:'fixed',
                    margin: '0 auto',
                    zIndex: 100000,
                    border: 'solid 3px #F43D3E',
                    width: 300
                }).hide(3500);    // 3.5s modifiable !
            });
 
        });
    </script>

EDIT : on peut également mettre un délai avant l'exécution du hide()

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
 
    <script type="text/javascript">
        $(document).ready(function(){
 
            //http://james.padolsey.com/javascript/jquery-delay-plugin/
            $.fn.delay = function(time, callback){
                jQuery.fx.step.delay = function(){};
                return this.animate({delay:1}, time, callback);
            }
 
            /*
            * Attention un id doit être unique.
            */
            var alertChargerNumber = 0;
 
            $("#lien").click(function(){
                var number = alertChargerNumber++;
 
                $(this).append('<div id="alert_charger' + number + '"><p>Donn&eacute;e charg&eacute;e</p></div>');
 
                $('#alert_charger' + number).css({
                    background:'#ffffff',
                    position:'fixed',
                    margin: '0 auto',
                    zIndex: 100000,
                    border: 'solid 3px #F43D3E',
                    width: 300
                }).delay(3500, function(){    // 3.5s de délai avant le hide()
                    $(this).hide("slow");
                });
            });
 
        });
    </script>

Merci beaucoup pour ton aide je prefere la 1er solution plus simple a mon gout.

Merci encore