Question

当我将鼠标悬停在带有课程专辑的div上时，ajax会加载并显示幻灯片div。然后，当我离开专辑div时，它隐藏了幻灯片div。正是我想要的。问题是当我将鼠标悬停在专辑div上并在ajax加载之前离开时，它会在我没有悬停在专辑div上时加载。如果我没有在div上盘旋，我怎么能拥有它，幻灯片无论如何都不会显示？

JQUERY

$('.album').hover(function(){
    var id = $(this).attr('id');

    var url = "albumphotos.php";
    $.post(url, {contentVar: id}, function(data){
        $("#album_slide").html(data).show();

    });
    }, function(){
    $("#album_slide").html("").hide();
});

Answer 1

离开相册时尝试中止ajax

$('.album').hover(function(){
    var id = $(this).attr('id');

    var url = "albumphotos.php";
    var ajax = $.post(url, {contentVar: id}, function(data){
        $("#album_slide").html(data).show();
        $(this).removeData('slideajax');
    });
    $(this).data('slideajax', ajax);
}, function(){
    var ajax = $(this).data('slideajax');
    if(ajax){
        $(this).removeData('slideajax');
        ajax.abort();
    }

    $("#album_slide").html("").hide();
});

Answer 2

if( $('#elem').is(":hover")){
 //then show slide div
}

检查您是否正在悬停

Answer 3

将鼠标悬停在元素上时切换该元素，并根据相册是否可见，有条件地显示album_slide。

$('.album').mouseenter(function(){
    var self = this;
    var url = "albumphotos.php";
    $(self).addClass("albumShown");
    $.post(url, {contentVar: self.id}, function(data){
        if ($(self).is('.albumShown')) {
            $("#album_slide").html(data).show();
        }
    });
}).mouseleave(function() {
    $("#album_slide").html("").hide();
    $(this).removeClass("albumShown");
});

如何在加载AJAX请求之前隐藏div？

3 个答案: