开发者

jQuery fadeIn fadeOut background problem

When I fadeIn a div, and this animation finished, the background suddenly disappears (this time only in Firefox). I have a container, with two nested elements in it. The second element has a negative margin, so it appears on top of the first.

My script:

jQuery(document).ready(function($) {
    $(".second_element").hide();
    $(".container").each(function () {
        $(this).mouseover(function () {
            $(this).children(".second_element").stop(true, true);
            $(this).children(".second_element").fadeIn(250, 'linear');
        }); 
        $(this开发者_开发问答).mouseout(function () {
            $(this).children(".second_element").stop(true, true);
            $(this).children(".second_element").fadeOut(100, 'linear');
        });
    });
});

CSS:

.container{
width: 221px;
height: 202px;
display: block;
float: left;
position: relative;
}

.first_element {
height: 200px;
width: 219px;
}

.second_element {
display:none;
background: #fff !important;
margin-top: -51px;
width: 219px;
height: 50px;
}

And for clarity, this a HTML example

<td class="container">
    <div id="first_element">...</div>
    <div id="second_element">...</div>
</td>

My second problem is, that when my mouse is hovering above the second element, the function is executed again (so the second element fades out and in). While the second element is just IN the container


This is shorter, and also, for first run, it is better that hide target by fadeOut() instead of hide()

$(".caption").fadeOut(1);

$(".container").each(function() {

    $(this).mouseover(function() {
        $(".caption", this).stop().fadeIn(250);
    });

    $(this).mouseout(function() {
        $(".caption", this).stop().fadeOut(250);
    });

});


Complementing the last comments; I got it. I tried it in several ways, and also with the caption to position: absolute, but instead I had to set the first element to position: absolute... now it works (however not with fading, but this is fine). I thank you very much for all your help and support!

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜