Как Вы исчезаете в / цвете фона с помощью jQuery?

Question

Как Вы исчезаете в / цвете фона с помощью jQuery?

Я искал плагин textarea координат каретки для meteor-autocomplete , поэтому я оценил все 8 плагинов на GitHub. Победителем, безусловно, является textarea-caret-position из Компонента .

Особенности

Точность пикселей
Нет зависимостей
Совместимость браузера: Chrome, Safari, Firefox (несмотря на два ошибки есть), IE9 +; может работать, но не тестировалось в Opera, IE8 и более ранних версиях
поддерживает любое семейство и размер шрифта, а также преобразование текста
область текста может иметь произвольные отступы или границы
не путаются с горизонтальными или вертикальными полосами прокрутки в текстовой области
поддерживает жесткие возвраты, табуляции (кроме IE) и последовательные пробелы в тексте
правильное положение в строках длиннее столбцов в тексте area
нет «призрачного» положения в пустом пространстве в конце строки при переносе длинных слов

Вот демонстрационная версия - http: //jsfiddle.net/dandv/aFPA7/

enter image description here

Как это работает

Зеркало

создается вне экрана и в стиле точно так же, как

</code>. Затем текст текстовой области до каретки копируется в div, и сразу после него вставляется <code><span></code>. Затем текстовое содержимое диапазона устанавливается равным оставшемуся тексту в текстовой области, чтобы точно воспроизвести упаковку в поддельном div. </p><p> Это единственный метод, который гарантированно обрабатывает все крайние случаи, относящиеся к переносу длинных строк. Он также используется GitHub для определения позиции выпадающего списка пользователей <strong> @ </strong>. </p></p>
         </div>
         <div class="votes-question">
            <div class="vote-count" itemprop="upvoteCount">91</div><i class="fa fa-thumbs-o-up"></i>
         </div>
         <div class="tags">
            <a href="/questions/tagged/jquery" class="tag"  title="jquery" rel="tag">jquery</a> <a href="/questions/tagged/css" class="tag"  title="css" rel="tag">css</a> <a href="/questions/tagged/background-color" class="tag"  title="background-color" rel="tag">background-color</a> <a href="/questions/tagged/fade" class="tag"  title="fade" rel="tag">fade</a>         </div>
         <div class="clearfix"></div>
         <div class="action-time">
            задан Leonard            <span title="16 February 2017 в 15:11 ">16 February 2017 в 15:11 </span>
         </div>
         
         <a class="s-link" href="/questions/183133/kak-vy-ischezaete-v-cvete-fona-s-pomoschju-jquery" title="поделиться">поделиться</a>
      </div>
   </div>
  <div style="height:100px;margin:10px 0px;" class="">

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- siteask before post --> <ins class="adsbygoogle"      style="display:block;height:100px"
                                                                                                                             data-ad-client="ca-pub-2355906945027976"
                                                                                                                             data-ad-slot="" data-ad-format="auto"></ins>
    <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

    </div>
   <div class="answers" id="answers">
   
      <h2 class="pull-left"><span itemprop="answerCount">3</span> ответа</h2>
      <div class="clearfix"></div>

      <div class="answer-pager">
         <div class="pagination">
                     </div>
      </div>

         
         <div class="answer accepted" id="474582" itemscope="" itemtype="http://schema.org/Answer" itemprop="acceptedAnswer">
            <div class="answer-row">
               <div class="answer-text">
                  <div class="description" itemprop="text">
                     <p> Эта точная функциональность (3-секундное свечение для выделения сообщения) реализована в пользовательском интерфейсе jQuery как эффект выделения </p>

<p><a href="https://api.jqueryui.com/highlight-effect/" rel="nofollow noreferrer"> https://api.jqueryui.com/highlight-effect/ </a></p>

<p> Цвет и продолжительность изменяются </p>                  </div>
                  <div class="votes-answer green">
                     
                     <div class="vote-count" itemprop="upvoteCount">88</div><i class="fa fa-thumbs-o-up"></i>
                  </div>
                  <div class="clearfix"></div>
                  <div class="action-time">
                     ответ дан                      <span title="24 November 2019 в 06:41 ">24 November 2019 в 06:41 </span>
                  </div>
                  <a class="s-link" href="/questions/183133/kak-vy-ischezaete-v-cvete-fona-s-pomoschju-jquery#584" title="поделиться">поделиться</a>
               </div>
                              <div class="post-layout--right">
                  <div id="comments-474582">
                     <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true">
      
                                         </ul>
                  </div>
               </div>
            </div>
         </div>
         
            
         <div class="answer" id="474583" itemscope="" itemtype="http://schema.org/Answer">
            <div class="answer-row">
               <div class="answer-text">
                  <div class="description" itemprop="text">
                     <p> Если вы хотите специально анимировать цвет фона элемента, я считаю, что вам нужно включить фреймворк jQueryUI. Затем вы можете сделать: </p>

<pre><code>$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');
</code></pre>

<p> jQueryUI имеет несколько встроенных эффектов, которые могут быть вам полезны. </p>

<p><a href="http://jqueryui.com/demos/effect/" rel="noreferrer"> http://jqueryui.com/demos/effect/ </a></p>                  </div>
                  <div class="votes-answer green">
                     
                     <div class="vote-count" itemprop="upvoteCount">88</div><i class="fa fa-thumbs-o-up"></i>
                  </div>
                  <div class="clearfix"></div>
                  <div class="action-time">
                     ответ дан                      <span title="24 November 2019 в 06:41 ">24 November 2019 в 06:41 </span>
                  </div>
                  <a class="s-link" href="/questions/183133/kak-vy-ischezaete-v-cvete-fona-s-pomoschju-jquery#584" title="поделиться">поделиться</a>
               </div>
                              <div class="post-layout--right">
                  <div id="comments-474583">
                     <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true">
      
                                         </ul>
                  </div>
               </div>
            </div>
         </div>
         
            
         <div class="answer" id="474585" itemscope="" itemtype="http://schema.org/Answer">
            <div class="answer-row">
               <div class="answer-text">
                  <div class="description" itemprop="text">
                     <p> Обычно вы можете использовать метод <a href="http://api.jquery.com/animate/" rel="nofollow noreferrer"> .animate () </a> для управления произвольными свойствами CSS, но для цветов фона вам нужно использовать плагин цвета <a href="http://plugins.jquery.com/color/" rel="nofollow noreferrer"> </a>. Как только вы включите этот плагин, вы можете использовать что-то вроде того, что указали другие <code> $ ('div'). Animate ({backgroundColor: '# f00'}) </code>, чтобы изменить цвет. </p>

<p> Как писали другие , часть этого также можно сделать с помощью библиотеки jQuery UI. </p>                  </div>
                  <div class="votes-answer green">
                     
                     <div class="vote-count" itemprop="upvoteCount">14</div><i class="fa fa-thumbs-o-up"></i>
                  </div>
                  <div class="clearfix"></div>
                  <div class="action-time">
                     ответ дан                      <span title="24 November 2019 в 06:41 ">24 November 2019 в 06:41 </span>
                  </div>
                  <a class="s-link" href="/questions/183133/kak-vy-ischezaete-v-cvete-fona-s-pomoschju-jquery#584" title="поделиться">поделиться</a>
               </div>
                              <div class="post-layout--right">
                  <div id="comments-474585">
                     <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true">
      
                                         </ul>
                  </div>
               </div>
            </div>
         </div>
         
               <div style="margin-top: 20px;">
          Другие вопросы по тегам:          <div class="tags" style="display: inline-block; float: none;">
         <a href="/questions/tagged/jquery" class="tag"  title="jquery" rel="tag">jquery</a> <a href="/questions/tagged/css" class="tag"  title="css" rel="tag">css</a> <a href="/questions/tagged/background-color" class="tag"  title="background-color" rel="tag">background-color</a> <a href="/questions/tagged/fade" class="tag"  title="fade" rel="tag">fade</a>       </div>
        <h3 class="m-t-20">Похожие вопросы:</h3>

        <div class="related-block">
          <ul>
                          <li><div class='votes-answer green'><span class='vote-count'>59</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/127174/chto-luchshij-sposob-sostoit-v-tom-chtoby-vynudit-sebja-k-osnovnomu-vi-zakrytyj" title="Что лучший способ состоит в том, чтобы вынудить себя к основному vi? [закрытый]">Что лучший способ состоит в том, чтобы вынудить себя к основному vi? [закрытый]</a> - 9 April 2009 03:44 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>55</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/87787/pochemu-by-ne-ispolzovat-tablicy-dlja-razmetki-v-html-zakryto" title="Почему бы не использовать таблицы для разметки в HTML? [закрыто]">Почему бы не использовать таблицы для разметки в HTML? [закрыто]</a> - 6 November 2018 00:07 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>40</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/89465/kak-luchshe-vsego-obnaruzhit-mobilnoe-ustrojstvo" title="Как лучше всего обнаружить мобильное устройство?">Как лучше всего обнаружить мобильное устройство?</a> - 24 April 2019 12:27 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/90066/kak-sdelat-div-ne-bolshe-ego-soderzhimogo" title="Как сделать div не больше его содержимого?">Как сделать div не больше его содержимого?</a> - 20 September 2015 12:27 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/82961/kak-luchshe-vsego-obnaruzhit-ustrojstvo-s-sensornym-ekranom-s-pomoschju-javascript" title="Как лучше всего обнаружить устройство с «сенсорным экраном» с помощью JavaScript?">Как лучше всего обнаружить устройство с «сенсорным экраном» с помощью JavaScript?</a> - 15 October 2013 16:24 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>31</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/2517/jquery-extend-i-object-az-z-ign-fail-duplicate" title="jQuery.extend () и Object.assign fail [duplicate] ">jQuery.extend () и Object.assign fail [duplicate] </a> - 22 March 2017 17:17 </li>
                            <li><div class='votes-answer green'><span class='vote-count'>31</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/11647/kak-sopostavit-collator-vnutri-pol-zovatel-skoj-sortirovki-dlya-ob-ektov-v-jz-duplicate" title="Как сопоставить Collator внутри пользовательской сортировки для объектов в JS [duplicate] ">Как сопоставить Collator внутри пользовательской сортировки для объектов в JS [duplicate] </a> - 17 June 2015 03:09 </li>
                          </ul>
        </div>

      </div>
   </div>
   
</div>      </div>
      <aside class="sidebar">
        <div class="awrap">

<script async src="https://yastatic.net/pcode-native/loaders/loader.js"></script>
<script>
    (yaads = window.yaads || []).push({
        id: "553274-2",
        render: "#id-553274-2"
    });
</script>
<div id="id-553274-2"></div>
          <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-2355906945027976"
     data-ad-slot="8038370725"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


        </div>
      </aside>

    </div>
  </div>
  <footer class="footer">
    <div class="wrapper wrapper--sm">
      <div class="footer-navs-col">
        <div class="footer-nav footer-nav--menu">

          <div class="footer-coryright">© 2017 - 2020 Вопросы и ответы по программированию</div>
        </div>
        <div class="footer-nav footer-nav--catalog">
        </div>
      </div>
      <div class="footer-contacts-col">
        <div class="soc-widget-col">
        </div>
      </div>
      <div class="clearfix"></div>
    </div>

  </footer>

</div>

<script type="text/javascript" src="/js/ui/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="/js/ui/external/jquery.cookie.js"></script>

<script type="text/javascript" src="/js/versions/menu.ru.u1607887878.js"></script>


<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="/js/slick.min.js"></script>
<script type="text/javascript" src="/js/jquery.maskedinput.min.js"></script>

<script type="text/javascript" src="/js/versions/scripts.ru.u1607887878.js"></script>


<!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; var z = null;m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(90030325, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/90030325" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->


<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123993370-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-123993370-1');
</script>

</div>
<script type="application/ld+json">
  {
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Программирование - вопросы и ответы",
  "alternateName": "Программирование - вопросы и ответы",
  "url": "https://legkovopros.ru",
  "potentialAction": {
     "@type": "SearchAction",
     "target": "https://legkovopros.ru/search?search={search_term_string}",
     "query-input": "required name=search_term_string"
   }
}
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Программирование - вопросы и ответы",
  "url": "https://legkovopros.ru",
  "logo": "https://legkovopros.ru/i/logo.png",
  "email": "info@legkovopros.ru",
   "telephone": ""

}




</script>
</body>
</html>