jQuery оживить, чтобы установить позицию

Мне нужно анимировать изображения корзины покупок со страницы списка в заданное положение (корзина) в верхнем правом углу страницы. (Муха, чтобы вы могли сделать так, чтобы люди могли видеть предмет, входящий в корзину)jQuery оживить, чтобы установить позицию

Я только когда-либо использовал набор значений для анимации, поэтому я не уверен, с чего начать. Obviosuly каждый щелчок по изображению/продукту будет нуждаться в другом значении x/y для его анимации в корзину.

Любая помощь или указатели будут очень признательны.

А.

источник

2010-10-25 Adi

У меня такой же вопрос ранее, попробуйте поиграть со следующим кодом на чейнинга высоту, ширину до различных значений.

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

источник

2010-10-25 21:17:55 kobe

У вас есть репутация 220, это говорит о том, что вы были активны для некоторых время. Пожалуйста, не забудьте форматировать код ** как ** код, возможно, прочитайте справку [SO edit (Markdown)] (http://stackoverflow.com/editing-help/). –

@ david, конечно узнаю, что я только что присоединился 2 месяца назад, и мне нравится этот сайт много. Я узнаю, что формирование наверняка. – kobe

@gov, не беспокойтесь; Я собирался сделать это за вас, но решил, что это чему-то стоит учиться для себя (особенно, поскольку вы действительно выглядите достаточно активным) =) –

На самом деле, если вы установите позицию абсолютного, а затем анимировать его везде, где появляется на странице корзины, это должно быть довольно легко.

Допустим, у вас есть список продуктов

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

Вы могли бы сделать продукт готов быть добавлен в корзину, удалив некоторые из свойств первого и установки его положение в абсолют.

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

Это не было проверено, но идея состоит в том, что как только мы нажмем на продукте, мы будем двигаться этим продуктом к телу, установите его положение в абсолют, и использовать это смещение координат, чтобы убедиться, продукт не переходит к следующему относительному элементу. Затем мы получаем координаты смещения #cart и анимируем их в этом положении. Возможно, вам потребуется настроить эти значения, чтобы получить желаемый эффект.

Другой вариант это на самом деле клон продукт, прежде чем анимировать его (скрывая это оригинал), который хотел бы убедиться, что если пользователь удаляет его из корзины, вы можете буквально удалить его из DOM с помощью удаления(), а затем просто включите исходный продукт.

Ознакомьтесь с различными вариантами ослабления и используйте тот, который вам больше всего нравится. Все они могут применяться к методу .animate() jQuery.

Надеется, что это помогает, и я хотел бы видеть готовый продукт :)

С уважением,

Марко

источник

2010-10-25 21:37:30 Marko

Эй, спасибо, спасибо за подробное объяснение, я также ищу такого рода решения. Я хотел переместить изображение с x на y и сделать его большим на «Y» – kobe

jQuery оживить, чтобы установить позицию

ответ

Смежные вопросы