CODEWITHSUNDEEP
javascriptjquery
Adam
Adam

Reputation: 71

jQuery hide show slide hover

I'm having some difficulties in one of the jQ features I've implemented. The problem is that slide animation is hiding/showing multiple times for some of the attempts. I want it to be showing only once after hovering an element. All is working fine but sometimes is fading few times when mouse is hovering element, so if you move a mouse but you're still hover it shouldn't happened. I want it to fade every time you hover but it should animate only once per hover but sometimes is fading few extra times per one hover. Try to move a mouse between title and the content when hovering.

$(document).ready(function() {

$('.latest_module').hover(function(){

    var front = $(this).children('.cb-article-meta');
    var back = $(this).children('.cb-article-meta-hover');
    var backh2 = $(this).children('.cb-article-meta-hover').children('h2');
    var backp = $(this).children('.cb-article-meta-hover').children('p');
    var img = $(this).children('.cb-grid-img');
    $(front).css('display','none');
    $(back).css('display','block');
    $(img).addClass('latest_module_hover');
    $(backh2).hide().show("slide", { direction: 'right' },800).css('padding','0 20px');
    $(backp).hide().show("slide", { direction: 'left' }, 800).css('padding','0 20px');

},function(){

    var front = $(this).children('.cb-article-meta');
    var back = $(this).children('.cb-article-meta-hover');
    var img = $(this).children('.cb-grid-img');
    $(front).css('display','block');
    $(back).css('display','none');
    $(img).removeClass('latest_module_hover');

});

});

Testing on jsfiddle

Thanks,

Upvotes: 0

Views: 130

Answers (2)

JSantos
JSantos

Reputation: 1708

If your problem is that you only want hover to run the first time you can just unbind it when it enters with this $(this).unbind('mouseenter mouseleave')

$(document).ready(function() {

    $('.latest_module').hover(function(){
        $(this).unbind('mouseenter mouseleave')
        ...

http://jsfiddle.net/bgsx23nc/12/

EDIT: or as suggested by Guruprasad Rao only on leave

...
 $(img).removeClass('latest_module_hover');
         $(this).unbind('mouseenter mouseleave')

    });

});

http://jsfiddle.net/Guruprasad_Rao/bgsx23nc/13/

Upvotes: 2

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Just add a class to the sliding element and then from next time check if it has class already and if yes don't do anything like one below:

DEMO

$(document).ready(function() {
    $('.latest_module').hover(function(){
        if(!$(this).hasClass('hoverDone')) //check if it has class and if no then
        {
            $(this).addClass('hoverDone'); //add class once hover done
            var front = $(this).children('.cb-article-meta');
            var back = $(this).children('.cb-article-meta-hover');
            var backh2 = $(this).children('.cb-article-meta-hover').children('h2');
            var backp = $(this).children('.cb-article-meta-hover').children('p');
            var img = $(this).children('.cb-grid-img');
            $(front).css('display','none');
            $(back).css('display','block');
            $(img).addClass('latest_module_hover');
            $(backh2).hide().show("slide", { direction: 'right' },800).css('padding','0 20px');
            $(backp).hide().show("slide", { direction: 'left' }, 800).css('padding','0 20px');
        }
    },function(){
        var front = $(this).children('.cb-article-meta');
        var back = $(this).children('.cb-article-meta-hover');
        var img = $(this).children('.cb-grid-img');
        $(front).css('display','block');
        $(back).css('display','none');
        $(img).removeClass('latest_module_hover');
    });
});

Upvotes: 0

Related Questions