0

こんにちは、置き換えたい div があります。元の div と置換の両方に、いくつかの追加の jQuery アニメーションがあります。古い div をコンテンツに置き換えることはできますが、同じアニメーションを呼び出すこの div に置き換えようとすると、アニメーション スクリプトが競合していると思います。これは、新しい div を読み込もうとしているのに読み込み中のアニメーション スピナーが表示されるだけだからです。

元のdivは次のようになります

<td class="Products eventChangeProducts">
<div class="mosaic-block bar"><a href="http://localhost/shop/greeting-cards/" class="mosaic-overlay">
<div class="mosaicdetails"><h4 class="mosaicdisplay">Greeting Cards</h4>
<p class="mosaicdisplay">4x6 Cards with your Photo</p></a></div>
<div class="mosaic-backdrop"><a href="http://localhost/shop/greeting-cards/">
<img src="http://localhost/wp-content/uploads/postcard-300x300.jpg">
</a></div></div></td>

jQueryのreplaceWithはこちら

 jQuery(document).ready(function($){
   $('.eventChangeProducts').replaceWith('<td class="nfpProducts"> 
<div class="mosaic-block bar"><a href="http://localhost/shop/facebook-link/" class="mosaic-overlay">
<div class="mosaicdetails"><h4 class="mosaicdisplay">Facebook Link</h4>
<p class="mosaicdisplay">Post your Picture to Facebook</p></a></div>
<div class="mosaic-backdrop"><a href="http://localhost/shop/facebook-link/">
<img src="http://localhost:8888/wp-content/uploads/facebook-likes-300x300.jpg">
</a></div></div></td>');

jQueryアニメーションはこちら

jQuery(function($){
   jQuery(".bar").mosaic({
       animation:   
    });
});

私はこれを読みました - .replaceWith() メソッドは、ほとんどの jQuery メソッドと同様に、jQuery オブジェクトを返すため、他のメソッドをそれに連鎖させることができます。ただし、元の jQuery オブジェクトが返されることに注意してください。このオブジェクトは、それを置き換えた新しい要素ではなく、DOM から削除された要素を参照します。

したがって、jQuery アニメーションが 2 回呼び出され、競合が発生していると推測しています。

IFでは、最初のdivを完全に削除して新しいdivに置き換えて、これが発生しないようにするにはどうすればよいですか?

それとも別のものですか?

4

1 に答える 1