Гауссовское размытие onHover Использование jQuery

Мне интересно, есть ли способ применить gaussian blur к div с помощью jQuery (или CSS, который jQuery может изменить). Я заглянул в blur (), но, по крайней мере, с Safari, похоже, что он не выполняет то, что я ищу. Если возможно, я хочу использовать fadeIn для эффекта, поэтому он постепенно размывается.

Спасибо за любую помощь!

  • Как разобрать или запросить сложный JSON в JavaScript
  • Если элемент DOM удален, его слушатели также удаляются из памяти?
  • Видеоролик YouTube (инъецированный) завершает обратный вызов
  • JQuery.on ("drop") не срабатывает
  • Используйте jQuery для получения значений выбранных флажков
  • Добавить фрагмент в URL-адрес без перенаправления?
  • JQuery.scrollLeft (), когда направление rtl - разные значения в разных браузерах
  • Как проверить, скрыт ли элемент в jQuery?
  • 4 Solutions collect form web for “Гауссовское размытие onHover Использование jQuery”

    Имейте в виду, что Blur – это когда DOM-элемент, такой как текстовые поля (входы и т. Д.), Теряет фокус и не должен смешиваться с видом размытия, о котором вы говорите (гауссовское / motion blur).

    Для этой проблемы нет хорошего кросс-браузерного решения. Вы можете, однако, размыть изображения, используя API, например, тот, который предлагает Бэн. Или с помощью этого .

    Может быть, если вы узнаете способ нарисовать ваше содержимое div на холст HTML5, вы можете применить фильтр Blur с помощью Pixastic ?

    Проверьте плагин blur.js для jQuery: http://blurjs.com , он использует мой алгоритм Stack Blur, который, по моему мнению, в настоящее время является самым быстрым на основе JavaScript способом размытия элементов холста: http://www.quasimondo.com/StackBlurForCanvas /StackBlurDemo.html

     filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: url(blur.svg#blur); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10'); 

    Содержание blur.svg

     <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <feGaussianBlur stdDeviation="10" /> </filter> </svg> 

    Подробнее: http://demosthenes.info/blog/534/Crossbrowser-Image-Blur

    Здесь не упоминалось, что мы можем создать отличный реалистичный эффект размытия для текста, используя text-shadow CSS3. И (да, конечно!), Мы можем размыть сплошные фоны и границы с помощью box-shadow (вы знаете, вставляют тени и несколько теней).

    Поэтому я надеюсь, что в большинстве случаев вы можете достичь реалистичного эффекта размытия:

    1) размытие изображения с использованием холста

    2) размытие text-shadow с использованием text-shadow

    3) сплошной фон и размытие границ с использованием box-shadow

    4) Я забыл что-нибудь еще? ….


    PS: Я считаю, что невозможно написать волшебный класс, который размывает любой html.

    Ограничения, которые невозможно преодолеть: размыть границу изображения, размыть встроенные медиа

    JavaScript делает сайт умным, красочным и простым использованием.