Question

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

Answer 1

$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);
    });
});​