在具有淡入和淡出效果的图像上显示HTML元素

Question

我在图像上显示两个按钮和一个复选框，如下所示

仅当鼠标指针位于图像上方时，才会显示这些按钮和复选框。 当鼠标指针移开时，它们消失。

通过以下简单的jQuery代码可实现此效果。

jQuery(function(){
    jQuery(".the-buttons").hide();

    jQuery('.show-image').hover(function(){
        jQuery(this).find('.the-buttons').fadeIn(600);
    },function(){
        jQuery(this).find('.the-buttons').fadeOut(300);
    });
});

关联的HTML / CSS如下。

<span class="show-image" style="position: relative;float:left;margin:5px;">                        
    <a href="../product_images/large/3562298873030291049_Winter.jpg">
        <img src="../product_images/medium/3562298873030291049_Winter.jpg" alt="The image is not available"/>
    </a>

    <input type="button" class="the-buttons" name="btnEdit" value="" style="background-image:url(../css/layout/site/tables/action2.gif);height: 12px; width: 14px; border: none; cursor: pointer; background-color: transparent;position:absolute;top:0;left:0;" title="Click to edit this image." />                        
    <input type="checkbox" class="the-buttons" id="chk" name="chk" title="Check to mark for multiple deletion at once." style="position:absolute;bottom:0;right:0;" value="662"/>
    <input type="submit" class="the-buttons" name="btnDeleteSingle" value="" style="background-image:url(../css/layout/site/tables/action4.gif);height: 12px; width: 14px; border: none; cursor: pointer; background-color: transparent; text-align:right;position:absolute;top:0;right:0;" title="Click to delete this image." />
</span>

与按钮和复选框一样的静态CSS stype不相关。 CSS类show-image与所述给定<span>标签， the-buttons与给定按钮和复选框与jQuery代码给出该效果的相互作用。

---

我还有一个附加要求。 选中/选中图像右下角的给定复选框时，应永久显示它，而忽略淡入和淡出效果。 但是，图像上显示的其他两个按钮应该具有这种效果（再次取消选中该复选框时，它应该具有预期的效果）。 我尝试过某种方法但没有成功。 这有可能吗？

Answer 1

检查后，给它定义一个特定的类，如下所示：

.always-visible {
    display: inline !important;
}

并使用以下代码：

$("#chk").on("click", function () {
    var $this = $(this);
    if ($this.is(":checked")) {
        $this.addClass("always-visible");
    } else {
        $this.removeClass("always-visible");
    }
});

（当然，如有必要，将$替换$ jQuery ）

现在，我认为使用此代码进行衰落可能也有必要：

jQuery(this).find('.the-buttons').not('.always-visible').fadeIn(600);
// and
jQuery(this).find('.the-buttons').not('.always-visible').fadeOut(300);

Answer 2

使函数检查复选框是否被选中。 您可以在图片悬停后执行此操作。

if($('#chk').is(':checked')) {
        get only two of them fading in and out
}

else {
        all of them fading in and out
}

希望这可以帮助。