jquery hover fadein只在短时间内有效！为什么？

我写了下面的代码。这样，当我的鼠标悬停在

imgforplaces\u缩略图时

。div

check按钮将显示并覆盖在div
testtest
上。
但是，div
checkbutton
只会出现1-2秒，然后消失。如果我去掉位置：绝对；在css的div
testtest
中，div
checkbutton
将出现在它的下方

有人能告诉我为什么它只能工作1-2秒吗

我有两个div，
.testtest
和
.checkbutton
，它们由.imgforplaces\u thumbnail1包装

以下为各分区：

echo '<div class=imgforplaces_thumbnail1 id=imgforplaces_thumbnail>';
        echo '<div class=testtest>';
        echo "<a class='ajax' href='image_color_box.php?id=".$row['id']."' title='Homer Defined'>";
        echo "<img src='../imgforplaces_thumbnail/" . $row['location_name'] . ".png' />";
        echo '</a>';
        echo '</div>';
        echo '<div class=checkbutton><img src="../images/fbloginbutton.png" /></div>';
    echo '</div>';

jquery悬停函数：

$(document).ready(function(){
$(".checkbutton").hide();
$(".imgforplaces_thumbnail1").hover(function(){
$(".checkbutton", this).fadeIn("slow");
},
function(){
    $(".checkbutton", this).fadeOut("slow");
 });

});

您还可以尝试为淡入和淡出设置特定的时间跨度值，而不是使用硬编码的慢速和快速属性
像这样

$(document).ready(function(){
$(".checkbutton").hide();
$(".imgforplaces_thumbnail1").hover(function(){
$(".checkbutton", this).fadeIn(200,function(){


  //you can do something here
$("#yourimage").show();
      });
    },
    function(){
        $(".checkbutton", this).fadeOut(200,function(){
$("#yourimage").show();
});
 });

});

有关更多信息，请参阅
，您可以使用CSS来完成这项工作，这总比使用JavaScript来完成这项工作要好

.checkbutton {
    height: 40px;
    width: 209px;
    z-index: 2000;
    margin: 0 auto;

    /*
     * Note that I have added a transition and opacity
     */
    transition:200ms;
    opacity:0;
}

.imgforplaces_thumbnail1:hover .checkbutton{
    opacity:1;
}

上面我们在.imgforplaces_thumbnail1元素上使用CSS：hover伪类，然后当悬停在父元素上时，我们将影响.checkbutton的不透明度

有关更深入的信息，请参阅：hover伪类：

这将具有相同的预期效果，因为当您将鼠标悬停在imageforplaces_缩略图1上时，它将使不透明度变为1，并以200毫秒的时间过渡

下面是一个jsFiddle，它向您展示了如何使用CSS和HTML：
我想我知道问题出在哪里：

“testtest”和“checkbutton”都必须放置位置：绝对

这解决了我的问题。谢谢大家的宝贵意见
 使用毫秒而不是“慢”：）请用引号括起您的类和id名称！它极大地提高了可读性。您好，时间跨度值没有帮助，是的，它显示得更快，但在它完全显示后，它将再次消失。好的，我已经编辑了我的答案，如果你想在你的动画完成后做些什么，你可以像我一样，通过在淡入淡出功能中添加一个函数参数来完成above@Congleong提到JamCoope方法是做这类事情的最好方法，javascript并不比CSS更可靠，所以你应该优先考虑CSS而不是使用javascript
.checkbutton {
    height: 40px;
    width: 209px;
    z-index: 2000;
    margin: 0 auto;

    /*
     * Note that I have added a transition and opacity
     */
    transition:200ms;
    opacity:0;
}

.imgforplaces_thumbnail1:hover .checkbutton{
    opacity:1;
}