CODEWITHSUNDEEP
jquerytogglefade
Pascal Cloverfield
Pascal Cloverfield

Reputation: 581

jQuery fade Toggle don't stop toggling

on my project, the toggle function toggles multiple times. I think it's because of an absolute positioned div which should fade in an out. I can't solve that...

Here the jQuery-Code:

var $j = jQuery.noConflict();

$j(document).ready(function(){
$j('.grit_1_3_1').hover(
    function(){$j('.grit_1_3_1_hover').fadeIn()}, 
    function(){$j('.grit_1_3_1_hover').fadeOut()}
);
});

Here the css for the divs:

.grit_1_3_1 {
color: #ffffff;
width: 33%;
float: left;
background: #bdbdbd;
vertical-align: center;
text-align: center;
height: 296px;
margin-bottom: 30px;
}
.grit_1_3_1_hover {
    color: #ffffff;
    position: absolute;
    width: 296px;
    display: none;

    float: left;
    background: #bdbdbd;
    vertical-align: center;
    text-align: center;
    height: 296px;
    margin-bottom: 30px;
}

The first of the 3 teaser should toggle, but doesn't stop!

Thanks for your help!

Best regards

Upvotes: 0

Views: 1486

Answers (2)

Alnitak
Alnitak

Reputation: 339786

When you .fadeIn() the _hover div, it replaces the original <div> on screen, which causes your mouse to leave that <div>, triggering the second part of the .hover() call.

Rather than swapping the divs, it may be simpler to just swap the text contents of those divs.

Alternatively, use an absolute positioned <div> overlay on top of the two alternating divs. Have that div handle the hover action, but then have the required div below show through it.

Upvotes: 0

Atif
Atif

Reputation: 10880

$j(document).ready(function() {
    $j('.grit_1_3_1').hover(function() {
        $j('.grit_1_3_1_hover').stop.fadeTo(1);
    }, function() {
        $j('.grit_1_3_1_hover').stop().fadeTo(0);
    });
});​

Edit,

Actually, your HTML/CSS as also incorrect when the mouse is over .grit_1_3_1, .grit_1_3_1_hover completely overlaps .grit_1_3_1. Thus, that means the mouse is now out of .grit_1_3_1 and it fade back out.

Instead of showing/hiding grit_1_3_1_hover I recommend you create 2 divs at the child level grit_content and grit_content_hover then modify your code to

$j(document).ready(function() {
    $j('.grit_1_3_1').hover(function() {
        $j('.grit_content_hover', $(this)).stop.fadeTo(1);
    }, function() {
        $j('.grit_content_hover', $(this)).stop.fadeTo(0);
    });
});​

Upvotes: 1

Related Questions