jquery - 单击时停止 css 动画闪烁图像

Question

我有一张使用 CSS 制作的闪烁图像。该图像看起来像一个光标(某种程度上)。它位于文本区域之上。当用户单击图像或文本区域时，我希望闪烁的图像消失。到目前为止，这东西一直在闪烁。我怎样才能让它永远停止？

HTML:

<form id="commentsForm">
<div id="textareaWrap">
<img src="img/caret.png" id="blinking_caret" title="blinking caret" />
<textarea id="formStory" placeholder=""></textarea>
</div>
</form>

CSS:

    @keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
/* Chrome, Safari, Opera */
@-webkit-keyframes blink
{
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
    #textareaWrap {
        position: relative;
    }
        #blinking_caret {
            position: absolute;
            top: 0; left: 0;
            animation: blink 1s;
            animation-iteration-count: infinite;
            -webkit-animation: blink 1s;
            -webkit-animation-iteration-count: infinite;
            z-index: 2;
        }
    #formStory {
        width: 100%;
        border: none;
        background-color: #f1f0f0;
        height: 400px;
        cursor: text;
        outline: none;
    }

j查询:

$('#formStory').click(function(){
    $('#blinking_cursor').stop( true, true ).fadeOut();
    $("#formStory").attr("placeholder","Start here ...");
});

Answer 1

您在 jQuery 中使用了 $('#blinking_cursor')。您的图片的 ID 为 #blinking_caret - 更新您的 jQuery 以选择正确的 ID。

如果您只是想让图像消失，只需执行 $('#blinking_caret').hide();