Comment puis-je faire glisser un contenu div dans un angle particulier en utilisant jquery

Question

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

javascript jquery css

1

user1075243 22 déc. 2011 à 17:41

Answer 1

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

Answer 2

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

Answer 3

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

1

locrizak 22 déc. 2011 à 13:46

Answer 4

$(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

Comment puis-je faire glisser un contenu div dans un angle particulier en utilisant jquery

4 réponses

Questions connexes

De nouvelles questions

javascript