1

ここには、大量の DOM 操作が必要なタスクがあります。これはパフォーマンスに悪影響を与える可能性があるため、要素を複製し、そこで変更を加えて、複製を元の要素に置き換えます。

置換後、要素にはホバー機能があります。

フェードトランジションが必要なので、次のように変更します。

myElement.fadeOut(500, function(){
    myClone.hide();
    myElement.replaceWith(myClone);
    myClone.fadeIn(500);
 });

これは機能していますが、その後ホバー機能が機能しなくなりました。からコールバックを削除すると、fadeOut再びホバリングできますが、時間指定されたトランジションは見栄えがよくありません。

私はそれについて何ができますか？コールバックを使用すると、要素のホバー機能が失われるのはなぜですか?

4

2 に答える 2

2

私はあなたのために別の解決策を持っています。CSS アプローチ:

要素の位置の 1 つを設定できます。

#myElement { top:100px; left:200px; }
#myElement, #myClone { position:absolute; }

jQuery:

$(document).ready(function() {

var myElement = $('#myElement');
var myClone = $('#myClone');

var myEleTop = parseInt(myElement.css('top'));
var myEleLeft = parseInt(myElement.css('left'));

myClone.hide();
myClone.css({'top':myEleTop+'px','left':myEleLeft+'px'});//sets position here

myElement.mouseenter(function() {
    myElement.fadeOut(500, function(){
      myClone.fadeIn(500);
    }
});
myElement.mouseleave(function() {
    myClone.fadeOut(500, function(){
      myElement.fadeIn(500);
    }
});

});

または、 appendTo（）およびremove（）メソッドを使用することもできます。これらのメソッドの経験はあまりありませんが、これを試してください：

myElement.mouseenter(function() {
    myElement.fadeOut(500, function(){
      myElement.remove();
      myClone.appendTo($('.container'));
      myClone.fadeIn(500);
    }
});
myElement.mouseleave(function() {
    myClone.fadeOut(500, function(){
      myClone.remove();
      myElement.appendTo($('.container'));
      myElement.fadeIn(500);
    }
});
于 2012-07-18T12:05:40.573 に答える
1

オブジェクトが複製されると、その複製にはイベント リスナーが関連付けられなくなります。これを修正する 1 つの方法は、"on" を使用してイベント ハンドラーをアタッチすることです。

$("my-clone-container").on("hover", "my-clone-selector", myHoverHandler);

このようにして、クローンを追加するたびに、必要に応じてホバー イベントを自動的に処理します。'on'のドキュメントを参照してください。

于 2012-07-18T12:29:47.380 に答える