0

ページを更新せずに投稿を自動的にロードしたいので、 jquery を使用してい$.getます。次に、誰かがその投稿の上にマウスを移動すると、左から div がアニメーション化されます。しかし、投稿は 30 秒ごとに更新されるため、マウス アニメーションが機能せず、div が点滅して非表示になり、残りません。より良い方法は何ですか？

これが私のコードです-Jquery

// JavaScript Document
$(document).ready(function(){
    $(".sharePosts").hide();
    $(".LrgPosts").mouseenter(function() {
        $(this).find(".sharePosts").show().animate({width: '51px'}, "fast");
    }).mouseleave(function(){
        $(this).find(".sharePosts").hide().animate({width: '0px'}, "slow");
    });

    $(function() {
        refreshEPosts();
    });

    function refreshEPosts(){
        setTimeout(refreshEPosts,30000);
        $.get('getNewPosts.php', function(data) {
            $('#leftAlign').html(data).fadeIn();    
        });
     }
});
4

2 に答える 2

0

やりたいことの 1 つは、.on()関数を使用してイベントを添付することです。

$('body').on('mouseenter','.Lrgposts',function(){ // stuff});

mouseleave にも同じものを使用します。.mouseenter()orの 1 つの問題.mouseleave()は、動的 HTML では機能しないことです。

于 2013-08-02T05:12:15.087 に答える
0

HTML全体を置き換えているため、divの表示と非表示のアニメーションは点滅しているだけで、留まりません。HTML を完全に置き換えるのではなく、新しい投稿を HTML dom に追加し続ける必要があると思います。

 // this is just and example, you cant modify with your own code.  

 function refreshEPosts(){
    setTimeout(refreshEPosts,30000);
    $.get('getNewPosts.php', function(data) {

        if(gotNewPost(data)){
            var newPostHtml = "<div>" + data + "</div>";
            $('#leftAlign').append(newPostHtml ).fadeIn();
        } 

    });
 }
于 2013-08-02T04:41:44.020 に答える