jQuery animer pour régler la position

J'ai besoin d'animer les images du panier à partir d'une page de liste dans une position définie (panier) en haut à droite de la page. (Une mouche à effectuer si vous voulez que les gens puissent voir l'objet entrer dans le panier)jQuery animer pour régler la position

Je n'ai utilisé que des valeurs de réglage pour l'animation, donc je ne sais pas par où commencer. Obviosuly chaque image/produit cliqué aura besoin d'une valeur x/y différente pour l'animer dans le panier.

Toute aide ou pointeur serait grandement appréciée.

Source

2010-10-25 Adi

J'ai une même question plus tôt, essayez de jouer avec le code suivant par chaning hauteur, largeur à une des valeurs différentes.

$(document).ready(function() { 
    $("#myimage").mouseover(function() { 
    var $this = $(this); 
     $this.animate({height: '+=5', width: '+=5'}, 'fast', function() { 
     $this.animate({height: '-=10', width: '-=10'}, 'fast', function() { 
     $this.animate({height: '+=5', width: '+=5'}, 'fast', function() { 
      //animation finished 
     }); 
     }); 
    }); 
    }); 
});

Source

2010-10-25 21:17:55 kobe

Vous avez un représentant de 220, cela suggère que vous avez été actif pour certains temps. N'oubliez pas de mettre en forme le code ** comme ** code, lisez peut-être l'aide [SO édition (Markdown)] (http://stackoverflow.com/editing-help/). –

@david, je l'apprendrai sûrement, je viens de rejoindre il y a 2 mois et j'aime beaucoup ce site. J'apprendrai ce formage à coup sûr. – kobe

@gov, pas de soucis; J'allais le faire pour vous, mais je pensais qu'il valait la peine d'apprendre par vous-même (d'autant que vous semblez être très actif) =) –

En fait, si vous définissez la position à absolue, puis animez à chaque fois que le panier apparaît sur la page, il devrait être assez facile.

Supposons que vous aviez une liste de produits

<li> 
    <h3>Product Title</h3> 
    <p class="desc">Lorem ipsum...</p> 
    <a class="add" href="#>add to basket</a> 
</li>

Vous pouvez rendre le produit prêt à ajouter au panier, en supprimant certaines des propriétés d'abord et la mise en sa position d'absolu.

$("#products li .add").click(function() { 
    // We mainly want to work with the <li> here so lets store it in a variable 
    var $parent = $(this).parent(); 

    // get the offset of the current product 
    var offset = $parent.offset(); 

    // let's assume we have our cart with id #cart and let's get it's offset too 
    var cartOffset = $("#cart").offset(); 

    $parent 
    // apend it to the body so that the `<body>` is our relative element 
    .appendTo("body"); 

    // Set the product to absolute, and (hopefully) clone its' position 
    .css({ 
     'position': 'absolute', 
     'top': offset.top, 
     'left': offset.left 
    }) 

    // we're now ready to animate it, supplying the coordinates from the #cart 
    .animate({ 
     'top': cartOffset.top, 
     'left': cartOffset.left 
    }, 500) 

    // Then fade it out perhaps? 
    .fadeOut(300); 
});

Cela n'a pas été testé, mais l'idée est qu'une fois que l'on clique sur un produit, nous allons passer ce produit au corps, définissez sa position d'absolu, et de l'utiliser est compensé les coordonnées pour vous assurer que la le produit ne saute pas à l'élément relatif suivant. Nous obtenons ensuite les coordonnées de décalage du #cart et l'animons à cette position. Vous devrez peut-être modifier ces valeurs pour obtenir l'effet désiré.

L'autre option de c'est-à-fait clone le produit avant de l'animant (cacher c'est d'origine) qui se assurer que si un utilisateur retire du panier, vous pouvez littéralement retirer juste du DOM à l'aide retirer() puis activez simplement le produit d'origine. Consultez les différentes options d'assouplissement disponibles et utilisez celle qui vous plaît le plus.

Tout ceci peut être appliqué à la méthode .animate() de jQuery.

Espérons que cela aide et je serais ravi de voir le produit fini :)

Cordialement,

Marko

Source

2010-10-25 21:37:30 Marko

Salut Marko, merci pour votre explication détaillée, je suis également à la recherche de ce genre de solution. Je voulais déplacer une image de x à y et la rendre grande à "Y" – kobe

jQuery animer pour régler la position

Répondre

Questions connexes