點擊停止css動畫閃爍圖像

我有一個圖像，我已經通過使用CSS閃爍。該圖像看起來像一個遊標（各種）。它位於textarea上方。當用戶點擊圖像或文本區域時，我想讓閃爍的圖像消失。到目前爲止，這件事情一直在閃爍。我怎樣才能讓它停下來好呢？點擊停止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 ..."); 
});

來源

2014-05-07 LauraNMS

你在你的jQuery使用$('#blinking_cursor')。您的圖片ID爲#blinking_caret - 更新您的jQuery以選擇正確的ID。

如果你想簡單的圖像消失，只是做$('#blinking_caret').hide();

來源

2014-05-07 15:35:17

尷尬，但真實。 – LauraNMS

保持元素的ID，而是通過類應用CSS。您仍然可以獲得快速/絕對選擇，但可以在點擊功能中執行此操作：

$('#blinking_cursor').removeClass('whateverClassName');

+1給Yuriy。完全錯過了！

來源

2014-05-07 15:37:35 Spanka

爲什麼要使用JavaScript？這可以只使用CSS來完成。代碼（和小提琴）會隱藏插入符號，只要textarea具有焦點或文本（使用HTML5必需屬性）。

這裏有一個小提琴：http://jsfiddle.net/rgthree/7ePSU/

HTML：

<form id="commentsForm"> 
    <div id="textareaWrap"> 
     <textarea id="formStory" required placeholder=""></textarea> 
     <span class="caret"></span> 
    </div> 
</form>

CSS：

#textareaWrap { 
    position:relative; width:200px; 
} 
#textareaWrap textarea { 
    position:relative; width:100%; height:100px; z-index:1; font-size:12px; 
} 
#textareaWrap .caret { 
    -webkit-animation: blink 1s steps(1) infinite; 
    position:absolute; left:3px; top:2px; z-index:2; 
    width:1px; height:1em; background:#000; 
} 
#textareaWrap textarea:focus + .caret, 
#textareaWrap textarea:valid + .caret {display:none;} 
@-webkit-keyframes blink { 
    0% {opacity: 1;} 
    50% {opacity: 0;} 
    100% {opacity: 1;} 
}

注意：您仍然需要JavaScript才能做佔位符。（你可以像.caret一樣對其進行建模，但這不是必需的）。不過，你的問題不是關於佔位符的，所以我只是告訴你如何完成遊標。

來源

2014-05-07 15:39:31 rgthree

點擊停止css動畫閃爍圖像

回答

相關問題