我用css制作了一张 Flink 的图片。这张图片看起来像一个光标（某种程度上）。它位于一个文本区域上。当用户点击图片或文本区域时，我希望 Flink 的图片消失。到目前为止，它一直在 Flink 。我如何才能让它永远停止呢？
超文本：

<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;
    }

查询：

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