J'essaye de faire glisser un contenu div en haut à droite. j'essaye mais je ne peux pas l'obtenir, voici mon code html
<html><body>
<button id="animatenow">animate now!</button>
<div id="container">
<div>hi</div>
<div>there</div>
</body>
</html>
Voici le script
$(document).ready(function(){
$('#animatenow').click(function(){ $('#container').animate({width: "-=300px",marginTop: "-=1250px", height: "+=50px"},1500);}); });`
Mon css est
#container{width:600px;color:#fff;background:#f00;height:400px}
Mon jsfiddle code
4 réponses
Eh bien, un moyen un peu trop complexe pour ce faire:
$('#animatenow').click(function(){
var that = $('#container');
var h = that.height();
var w = that.width();
$('#container')
.wrap('<div id="placeholder"></div>')
.parent()
.css({
'width' : w,
'height' : h
})
.find('#container')
.css({
'position' : 'absolute',
'top' : 0,
'left' : 0,
'right' : 0,
'bottom' : 0
})
.animate(
{
'top' : '-' + h,
'left' : w,
'right' : '-' + w,
'bottom' : h
},2000,
function(){
$(this).parent().remove();
});
});
Ce qui précède suppose que vous souhaitiez éviter le retour à la ligne du texte de l'élément coulissant et sa redistribution lorsqu'il glisse hors de la vue. Si vous êtes d'accord avec la redistribution du texte, c'est beaucoup plus facile et évitez d'ajouter un nouvel élément d'habillage et l'appel (hideux) à animate()
.
Les références:
J'ai mis à jour votre code ici. De base, vous devez animer les propriétés gauche, supérieure et largeur après avoir défini la position: propriété absolue de #container
$(document).ready(function() {
$('#animatenow').click(function() {
$('#container').animate({
right: '0',
top: '0',
width: '120',
height: '120'
}, 'slow');
});
});
Si vous voulez déplacer le div hors de la zone visible ou le masquer, faites la largeur et la hauteur 0px
Vous avez oublié position:absolute
sur le #container
css
$(document).ready(function(){
$('#animatenow').click(function(){
$('#container').animate({
marginLeft: "700px",
marginTop: "-=1250px",
}
,1500);
});
});
Essayez-vous d'obtenir un effet comme celui-ci? Je ne suis pas sûr de ce que vous voulez dire, j'espère que cela vous aidera un peu.
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.