0

最初のクリックで機能しているボタンをクリックした後、フライトゥエフェットを作成しようとしていますが、gotoの位置がどういうわけか左：15と上15または左：0、上：0よりももう一度クリックすると

クローンが画像のIDを複製するため、問題は.clone（）と.prependTo（）のどこかにあると思いますが、アニメーションの終了後にクローン画像を削除する方法がわかりませんでした。

だから私はこれを機能させるためにいくつかの助けが必要です。

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

clonevarは複製されたオブジェクトへの参照を保持するので、それを使ってやりたいことが何でもできることに注意してください。$(clone).remove();例：アニメーションが完了した後、などに置き換えてIDを変更できますclone.attr('id', 'myNewID');... jsFiddleリンクを更新します：http：//jsfiddle.net/salih0vicX/vD256/13/

また、一部のHTML要素が欠落していることにも気づきました。例：jQueryはid="imglist"の要素を参照しています。提供されたHTMLにはそのような要素はなく、loader.gifがロードされていません。とにかく、これがあなたの質問に答えたことを願っています。

于 2012-10-26T22:38:56.637 に答える