CODEWITHSUNDEEP
jqueryjquery-uifirefox
fabric1601
fabric1601

Reputation: 91

jQuery UI bounce effect on hover executing multiple times in Firefox

You guys are my last resort and i hope that you will be able to help me after spending hours googling my issue.

Problem: I have a paragraph that "slides" on the top half of an image (when hovered) using the jQuery UI bounce effect. On Firefox, if i hover in the top part of the image (where the paragraph box will eventually appear), the bouncing is being executed indefinite. If I hover at the bottom part, everything is OK.

I have tested the issue on the other browsers (even IE) and it works fine, exactly as i expect.

I have tried using the .stop() but to no effect. And since I am still learning jQuery (I started with that 3 months ago) I am struggling to find an adequate solution.

I will appreciate if you could help me.

Cheers

P.S. This is my code:

HTML:

<div class="imgBox">
<img src="http://lorempixel.com/output/nightlife-q-c-260-260-2.jpg" alt="A-Accounts logo" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec lacinia mauris, ac tincidunt risus. Proin dictum blandit nisl, sed mollis nisi interdum eu.
    <button type="button" class="btn btn-primary db">Read more</button>
</p>

CSS

    .imgBox {
    width: 300px;
    height: 300px;
    border: 3px solid #dadada;
    border-radius: 10px;
    position: relative;
    box-shadow: 0px 0px 15px 0px #cacaca;
}
.imgBox:hover {
    box-shadow: none;
}
.imgBox img {
    margin: 20px auto;
    display: block;
}
.imgBox p {
    background: linear-gradient(#666666,#808080);
    height: 150px;
    width: 100%;
    color: #fff;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.7;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

jQuery

var main = function hoverDescription(){
    $('.imgBox').hover(
        function(){
            $(this).find('p').toggle( "bounce", 600 );
        },
        function(){
            $(this).find('p').toggle( "fold", 800 );
        }
    );
};

$(document).ready(main);

JSFiddle here

Upvotes: 0

Views: 166

Answers (1)

shahmanthan9
shahmanthan9

Reputation: 523

This is happening because,when you hover on your image and Para tag comes in bouncing and at the same time it hovers over image once again.

You can avoid multiple bounce like this

var main = function hoverDescription(){
    $('.imgBox').hover(
        function(){
            if($(this).find('p').css('display') != 'block')
                $(this).find('p').toggle( "bounce", 600 );
        },
        function(){
            $(this).find('p').toggle( "fold", 800 );
        }
    );
};

Upvotes: 1

Related Questions