0

我试图在单击第一次单击时起作用的按钮后创建一个飞行效果，但是如果您再次单击它，则转到位置以某种方式离开：15 和顶部 15 或左侧：0，顶部：0

我认为问题出在 .clone() 和 .prependTo() 的某个地方，因为克隆复制了图像的 id，但我不知道如何在动画完成后删除克隆的图像。

所以我需要一些帮助来完成这项工作。

html 看起来像这样：

<div class="container">
 <div class="Pic" id="PiC_111"><a href="#"><img id="imG_111" src="img0.jpg"></a></div>
 <div class="Cont">
  <div class="desc"><!-- some text here --></div>
  <form method="POST" action="func.php">
    <!-- some form stuf -->
    <input type="submit" class="send" name="send" value="send" id="111" />
  </form>
 </div>
</div>
<div class="container">
 <div class="Pic" id="PiC_123"><a href="#"><img id="imG_123" src="img1.jpg"></a></div>
 <div class="Cont">
  <div class="desc"><!-- some text here --></div>
  <form method="POST" action="func.php">
    <!-- some form stuf -->
    <input type="submit" class="send" name="send" value="send" id="123" />
  </form>
 </div>
</div>
<!-- lot more of this -->

JS看起来像这样

jQuery(document).ready(function($){
  $('input.send').click(function(){
    var imgID = (this.id);
    var posX = $('#imG_' + imgID).offset().left;
    var posY = $('#imG_' + imgID).offset().top;
    if($('#flytoID_' + imgID).length > 0) {
        var targetX = $('#flytoID_' + imgID).offset().left;
        var targetY = $('#flytoID_' + imgID).offset().top;
    } else {
        var targetX = $('#flytoTitleWrap').offset().left;
        var targetY = $('#flytoTitleWrap').offset().top;
    }
    var gotoX = targetX - posX + 20;
    var gotoY = targetY - posY + 20;
    var newImageWidth = $('#PiC_' + imgID).width() / 3;
    var newImageHeight = $('#PiC_' + imgID).height() / 3;

    $('#PiC_' + imgID + ' a img')
    .clone()
    .prependTo('#PiC_' + imgID +' a')
    .css({'position' : 'absolute', 'z-index' : '999999'})
    .animate({opacity: 0.4}, 100)
    .animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, function(){
        $('#notificationsLoader').html('<img src=\"images/loader.gif\" />');
        $('#imglist').css({'background-position' : '-50px 0'}); 
    });
  });
});

提前致谢

我上传到 jsfiddle：http: //jsfiddle.net/Piszi/vD256/12/

4

1 回答 1

0

这真的取决于你想用这个来完成什么。如果您想在产品图片动画到购物篮后删除它，您可以将部分代码替换为以下内容：

var clone = $('#PiC_' + imgID + ' a img') //UPDATE
.clone(true)
.prependTo('#PiC_' + imgID +' a')
.css({'position' : 'absolute', 'z-index' : '999999'})
.animate({opacity: 0.4}, 100)
.animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, function(){
        $('#notificationsLoader').html('<img src=\"images/loader.gif\" />');
        $('#imglist').css({'background-position' : '-50px 0'}); 
        $(clone).remove(); //UPDATE new line
    });

请注意， varclone保持对克隆对象的引用，因此您可以使用它做任何您想做的事情。示例您可以在动画完成后更改它的 id 并替换$(clone).remove();为clone.attr('id', 'myNewID');etc...更新 jsFiddle 链接：http: //jsfiddle.net/salih0vicX/vD256/13/

我还注意到缺少一些 HTML 元素 - 例如：jQuery 正在引用 id="imglist"; 的元素。提供的 HTML 中没有这样的元素，导致没有加载 loader.gif；等等。无论如何，我希望这能回答你的问题。

于 2012-10-26T22:38:56.637 回答