单击停止css动画闪烁图像

debugcn 发表于 Dev

劳拉

我有一个通过使用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;
    }

jQuery的：

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

尤里·加兰特（Yuriy Galanter）

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

如果您只是想让图像消失，那就做吧 $('#blinking_caret').hide();

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。