How to hide div before AJAX request loads?

Question

When I hover over my div with class album, the ajax loads and shows the slide div. Then when I leave the album div, it hides the slide div. Exactly what I want. The problem is when i hover over the album div and leave before the ajax loads, it loads when i am not hovering over the album div. How can I have it so if I am not hovering over the div, the slide div will not show no matter what?

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

score 4 · Accepted Answer · answered Aug 14 '13 at 04:26

Try to abort the ajax when you leave the album

$('.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();
});

Works!! Thank you! Do you think you can go even further to explain what you did? — user2127833, Aug 14 '13 at 04:34

score 1 · Answer 2 · answered Aug 14 '13 at 04:27

1

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

Check if you are hovering or not

answered Aug 14 '13 at 04:27

Farhad

742
6
22

are you sure it will work http://stackoverflow.com/questions/8010267/jquery-condition-check-ishover-not-working – Arun P Johny Aug 14 '13 at 04:29
The problem wasn't as simple as this, see Arun's answer. – user2127833 Aug 14 '13 at 04:36
i see. my idea was in checking by js is elemeent is hovered or not when ajax returns answer – Farhad Aug 14 '13 at 04:40

score 0 · Answer 3 · answered Aug 14 '13 at 04:32

Toggle a class on the element when you hover over it, and show the album_slide conditionally, depending on whether the album is visible.

$('.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");
});

How to hide div before AJAX request loads?

3 Answers3