使用淡入和淡出效果在图像上显示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是不相关的。带有给定show-image标记的CSS类<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
}

希望这有帮助。