Question

我正在尝试创建一个飞行来点击一个按钮正在第一次点击，但如果你再次点击它比goto位置以某种方式左：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/

Answer 1

这真的取决于你希望用这个来完成什么。如果您想要在将产品图像设置为动画后将其删除，则可以使用以下代码替换部分代码：

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

请注意var clone会保留对克隆对象的引用，以便您可以随意执行任何操作。示例您可以在动画完成后使用$(clone).remove();等替换clone.attr('id', 'myNewID');来更改它的ID ... 更新jsFiddle链接：http://jsfiddle.net/salih0vicX/vD256/13/

我还注意到缺少一些HTML元素 - 例如：jQuery引用了一个id =“imglist”的元素;提供的HTML中没有这样的元素，因为没有加载loader.gif;无论如何，我希望这能回答你的问题。

第二次单击后，jQuery elemet的偏移量返回不同的值

1 个答案: