Небольшой js помогите

[майрбек95]

Доброго времени всем суток! Очень нужна ваша помощь, помогите пожалуйста....

Делаю полет изображений в корзину по нажатии кнопки, код:

<script type="text/javascript">
 var nn = $('класс').html();
 $("класс").click(function(){ 
 $("класс") 
 .clone() 
 .css({'position' : 'absolute', 'z-index' : '9999'}) 
 .animate({opacity: 0.4, 
 marginLeft: 700, 
 marginTop: -600, 
 width: 80, 
 height: 80}, 1000, function() { 
 $(this).remove(); 
 }); 
 }); 
 }); 

</script>

А вот код кнопки и изображение которое должно полететь:

<img src="$THUMB$" class="gphoto" id="$BLOCK_PREF$-gphoto-$ID$" alt="$NAME$">
<div id="top_sold-411-wish" class="wish wadd" onclick="wishlist(this);" title="Добавить в список желаний"></div>

Его класс "wish wadd" меняется при нажатии на "wish wdel" и обратно при повторном. А id "top_sold-411-wish" 411 - это уникальный ID у каждой кнопки он разный.

Могите изменить код jquery чтобы работала только с классом, у меня лично не получилось зарабатывала только одна самая первая кнопка а мне нужно чтобы работала каждая и каждая отправляла в полет именно свою картинку, и хочется чтобы в реальном времени если "wish wadd" изображение летело при нажатии (при клике класс меняется) а если "wish wdel" ничего не происходило.

Буду вам очень благодарен, помогите.

Если нужно вот полный код материала

<div class="list-item" id="top_sold-item-359"><span class="gnew" data-date="26.10.2015">NEW</span>
<span class="gsale">SALE</span>
<a href="/shop/359/desc/torgovaja-stojka" class="gimg" title="Перейти на страницу товара">
 <img src="/_sh/3/359m.jpg" class="gphoto" id="top_sold-gphoto-359" alt="Торговая стойка сетчатая ПР41">
</a>
<div class="gname">
 <a href="/shop/359/desc/torgovaja-stojka">Торговая стойка сетчатая ПР41</a> 
</div>
<div class="gbuttons">
 <a href="javascript:void(0)" class="bt bt-2" onclick="javascript:add2Basket('359','top_sold');" title="Добавить в корзину"><i class="fa fa-shopping-cart"></i></a>
 <div id="top_sold-359-wish" class="wish wdel" onclick="wishlist(this);" title="Удалить из списка желаний"></div>
</div>
<div class="gprice uprice"><span class="top_sold-good-359-price">1850 </span><i class="fa fa-rub"></i></div>
<div class="actions">
 <p>Арт. 3055</p>
 
 <li>шесть корзин 0,4х 0,3 м</li><li>габариты 1,89 х 0,6 м</li>
</div>

<script type="text/javascript">
 var kaa = "top_sold-359-wish";
 alert(kaa.split('-')[0]);
 var nn = $('.number_rov').html();
 $("#top_sold-359-wish").click(function(){ 
 $("#top_sold-gphoto-359") 
 .clone() 
 .css({'position' : 'absolute', 'z-index' : '9999'}) 
 .animate({opacity: 0.4, 
 marginLeft: 700, 
 marginTop: -600, 
 width: 80, 
 height: 80}, 1000, function() { 
 $(this).remove(); 
 }); 
 }); 
 }); 

</script></div>

Мне нужно работать только исключительно классами

[abrahadabra]

$("класс").click(function(){
 $(this).clone() … // и далее всё как было

[майрбек95]

А можно чуть подробнее, не очень силен в js

[майрбек95]

Понял что вы имеете ввиду, но

не получилось зарабатывала только одна самая первая кнопка а мне нужно чтобы работала каждая и каждая отправляла в полет именно свою картинку, и хочется чтобы в реальном времени если "wish wadd" изображение летело при нажатии (при клике класс меняется) а если "wish wdel" ничего не происходило.

[рони]

майрбек95,

$(function() {
    $(".wadd").click(function() {
        var parent = $(this).parents(".list-item");
        $(".gphoto", parent).clone().css({
            "position": "absolute",
            "z-index": "9999"
        }).appendTo("body").animate({
            opacity: .4,
            marginLeft: 700,
            marginTop: -600,
            width: 80,
            height: 80
        }, 1000, function() {
            $(this).remove()
        })
    })
});

[майрбек95]

Спасибо огромное это именно то, что мне нужно. А нельзя ли чтобы полет был от кнопки? т.е. от места где находится нажимаемая кнопка?

[рони]

полет был от кнопки

$(function() {
    $(".wadd").click(function(event) {
        event.preventDefault();
        var parent = $(this).parents(".list-item"),
            pos = $(this).offset();
        $(".gphoto", parent).clone().css({
            "position": "absolute",
            "z-index": "9999",
            "left": pos.left,
            "top": pos.top
        }).appendTo("body").animate({
            opacity: .4,
            marginLeft: 700,
            marginTop: -600,
            width: 80,
            height: 80
        }, 1E3, function() {
            $(this).remove()
        })
    })
});