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

1
user1075243 22 déc. 2011 à 17:41

4 réponses

Meilleure réponse

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();
            });
});

JS Fiddle.

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:

1
David says reinstate Monica 22 déc. 2011 à 14:55

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

0
kvc 22 déc. 2011 à 14:13

Vous avez oublié position:absolute sur le #container css

1
locrizak 22 déc. 2011 à 13:46
$(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.

0
Ben 22 déc. 2011 à 14:08
8604720