<div class="col-lg-12"> </div> <h1>  Delivery Product</h1><hr/> <div class="col-lg-12"> <div class="row"> <div class="col-sm-4 col-lg-4 col-md-4"> <div class="thumbnail"> <img src="images/deliv1.png" alt=""> <div class="caption"> <h4 class="pull-right">₱1000</h4> </div> </div> </div> </div> </div>
function flyToElement(flyer, flyingTo) { var $func = $(this); var divider = 3; var flyerClone = $(flyer).clone(); $(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000}); $('body').append($(flyerClone)); var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() / 2) - ($(flyer).width()/divider)/2; var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() / 2) - ($(flyer).height()/divider)/2; $(flyerClone).animate({ opacity: 0.4, left: gotoX, top: gotoY, width: $(flyer).width()/divider, height: $(flyer).height()/divider }, 700, function () { $(flyingTo).fadeOut('fast', function () { $(flyingTo).fadeIn('fast', function () { $(flyerClone).fadeOut('fast', function () { $(flyerClone).remove(); }); }); }); }); }