Jquery glissant un div hors du côté de la fenêtre du navigateur

<script> 
    $(function(){ 
     $('#right_image1').hide().delay('10000').fadeIn('5000'); 
     $('#left_image1').hide().delay('10000').fadeIn('5000'); 
    }); 
</script> 

/* CSS */ 
#left_image1 { position: fixed; width: 50%; height: 100%; margin-left: 0; background: url(/images/1.jpg) } 
#right_image1 { position: fixed; width: 50%; height: 100%; margin-left: 50%; background: url(/images/2.jpg) }

Actuellement, il se fane en deux divs après un délai de 10 secondes. Comment puis-je obtenir le div sur le droit de glisser hors du côté droit de la fenêtre du navigateur après 5s d'être affiché et la div gauche de glisser sur le côté gauche du navigateur après 5s?Jquery glissant un div hors du côté de la fenêtre du navigateur

Source

2011-10-22 user852974

Pouvez-vous montrer des css liés à ces divs? Le glissement varie en fonction du css que vous utilisez. –

'# left_image1 {position: fixed; largeur: 50%; hauteur: 100%; marge gauche: 0; background: url (/images/1.jpg)} # right_image1 {position: fixed; largeur: 50%; hauteur: 100%; marge gauche: 50%; background: url (/images/2.jpg)} ' – user852974

Un violon de travail est here. Voici le JavaScript mis à jour:

$(function() { 
    $('#right_image1').delay(10000).fadeIn(500).delay(5000).animate({ 
     marginLeft: '100%' 
    }); 
    $('#left_image1').delay(10000).fadeIn(500).delay(5000).animate({ 
     marginLeft: '-50%' 
    }); 
});

Notez que nous utilisons des numéros pour delay et la durée de fadeIn. Ensuite, nous utilisons animate pour gérer le mouvement gauche/droite.

En outre, nous cachons avec CSS au lieu de JavaScript; C'est la meilleure pratique.

En outre, nous spécifions dans la CSS la valeur left pour éviter l'interaction de la marge ou du remplissage sur <body>.

Source

2011-10-22 04:24:55

Quelque chose comme

$('#right_image1').hide().delay('10000').fadeIn('5000', function() { 

    $(this).animate({right: '-1px'}, 5000); 
}); 

$('#left_image1').hide().delay('10000').fadeIn('5000', function() { 

    $(this).animate({left: '-1px'}, 5000); 
});

Source

2011-10-22 04:23:57

C'est le plus loin que j'ai eu http://jsfiddle.net/VrASZ/ –

Jquery glissant un div hors du côté de la fenêtre du navigateur

Répondre

Questions connexes