javascript - 要素(ボタン)を照らすテクニックやプラグインはありますか?

Question

「jquery-illuminate」を使用しようとしていました（http://www.tonylea.com/2011/jquery-illuminate）

ただし、これは私の Web サービス (jQuery1.9.1) では機能しませんでした。

要素(ボタン)を照らす方法を教えてもらえますか? これを試しました。しかし、これは要素を非表示にして表示するだけです。
ボタンを照らしたい:(

(function(t){
    var func = arguments.callee;
    if(t) func.rest=t*2;
    if(--func.rest>=0) $(".btn#illuminate").fadeTo(800,(func.b = !!!func.b) ? 0.5 : 1,func);
})(3);

score 2 · Accepted Answer

光るボタン (HTML & CSS):

HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Glowing buttons</title>
</head>
<body>

    <!-- Blue -->
    <a href="#" class="button blue">Hello World</a>

    <!-- Yellow -->
    <a href="#" class="button yellow">Hello World</a>

    <!-- White -->
    <a href="#" class="button white">Hello World</a>

</body>
</html>

コンパス (SCSS):

@import "compass/css3/images";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/animation";

body {
    background: #000 url('http://subtlepatterns.com/patterns/office.png');
    padding: 30px;
    font-family: "Helvetica Neue", "Helvetica", sans-serif;
}

/* Blue Shadow */
@include keyframes(blue) {
    0%, 100%{
        @include box-shadow(1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5));
    }
    50% {
        @include box-shadow(0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0));
    }
}

/* Yellow Shadow */
@include keyframes(yellow) {
    0%, 100%{
        @include box-shadow(1px 0px 19px 4px rgba(255, 245, 3, 1), inset 0px 0px 10px rgba(255, 255, 255, 0.5));
    }
    50% {
        @include box-shadow(0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0));
    }
}

/* White Shadow */
@include keyframes(white) {
    0%, 100%{
        @include box-shadow(1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5));
    }
    50% {
        @include box-shadow(0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0));
    }
}

/* Button */
.button {
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    @include border-radius(10px 0);
    margin-right: 20px;
}

/* Blue Background */
.blue {
    text-shadow: 0px 1px 0px #83e0f7;
    @include background-image(linear-gradient(top, #87e0fd, #53cbf1));
    @include animation(blue 2s infinite);
}

/* Yellow Background */
.yellow {
    text-shadow: 0px 1px 0px #faffc7;
    @include background-image(linear-gradient(top, #fff966, #f3fd80));
    @include animation(yellow 2s infinite);
}

/* White Background */
.white {
    text-shadow: 0px 1px 0px #fff;
    @include background-image(linear-gradient(top, #fff, #ccc));
    @include animation(white 2s infinite);
}

CSS:

body {
  background: black url("http://subtlepatterns.com/patterns/office.png");
  padding: 30px;
  font-family: "Helvetica Neue", "Helvetica", sans-serif; }

/* Blue Shadow */
@-moz-keyframes blue {
  0%, 100% {
    -moz-box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -moz-box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-webkit-keyframes blue {
  0%, 100% {
    -webkit-box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-o-keyframes blue {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@keyframes blue {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px rgba(0, 130, 196, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(0, 130, 196, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

/* Yellow Shadow */
@-moz-keyframes yellow {
  0%, 100% {
    -moz-box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -moz-box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-webkit-keyframes yellow {
  0%, 100% {
    -webkit-box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-o-keyframes yellow {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@keyframes yellow {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px #fff503, inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 245, 3, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

/* White Shadow */
@-moz-keyframes white {
  0%, 100% {
    -moz-box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-webkit-keyframes white {
  0%, 100% {
    -webkit-box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5);
    box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0);
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@-o-keyframes white {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

@keyframes white {
  0%, 100% {
    box-shadow: 1px 0px 19px 4px rgba(255, 255, 255, 0.7), inset 0px 0px 10px rgba(255, 255, 255, 0.5); }

  50% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0), inset 0px 0px 0px rgba(255, 255, 255, 0); } }

/* Button */
.button {
  text-align: center;
  padding: 10px 20px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px 0;
  border-radius: 10px 0;
  margin-right: 20px; }

/* Blue Background */
.blue {
  text-shadow: 0px 1px 0px #83e0f7;
  background-image: -webkit-linear-gradient(top, #87e0fd, #53cbf1);
  background-image: -moz-linear-gradient(top, #87e0fd, #53cbf1);
  background-image: -o-linear-gradient(top, #87e0fd, #53cbf1);
  background-image: linear-gradient(to bottom, #87e0fd, #53cbf1);
  -webkit-animation: blue 2s infinite;
  -moz-animation: blue 2s infinite;
  -o-animation: blue 2s infinite;
  animation: blue 2s infinite; }

/* Yellow Background */
.yellow {
  text-shadow: 0px 1px 0px #faffc7;
  background-image: -webkit-linear-gradient(top, #fff966, #f3fd80);
  background-image: -moz-linear-gradient(top, #fff966, #f3fd80);
  background-image: -o-linear-gradient(top, #fff966, #f3fd80);
  background-image: linear-gradient(to bottom, #fff966, #f3fd80);
  -webkit-animation: yellow 2s infinite;
  -moz-animation: yellow 2s infinite;
  -o-animation: yellow 2s infinite;
  animation: yellow 2s infinite; }

/* White Background */
.white {
  text-shadow: 0px 1px 0px #fff;
  background-image: -webkit-linear-gradient(top, #ffffff, #cccccc);
  background-image: -moz-linear-gradient(top, #ffffff, #cccccc);
  background-image: -o-linear-gradient(top, #ffffff, #cccccc);
  background-image: linear-gradient(to bottom, #ffffff, #cccccc);
  -webkit-animation: white 2s infinite;
  -moz-animation: white 2s infinite;
  -o-animation: white 2s infinite;
  animation: white 2s infinite; }

デモ: http://codepen.io/arbaoui_mehdi/details/yoCnx

注: Compass で css3 アニメーションを適用するために、アニメーションコンパスプラグインを使用しました。

score 1 · Accepted Answer

「jquery-illuminate」( http://www.tonylea.com/2011/jquery-illuminate ) を使おうとしているとおっしゃいましたが、これは [your] Web サービス (jQuery1.9.1) では機能しませんでした。

このセットアップでオフラインデモを作成しましたが、動作します:

<head>  
<script src="jquery_1.9.1.js"></script> 
<script src="jquery-ui_1.10.3.js"></script>
<script src="jquery.illuminate.0.7.js"></script>
<script>
window.onload = function(){
  if(true){ 
     var input = $(".box#input");
     $(document).scrollTop(input .offset().top - 60);
     var v = input.val();
     input.val('');
     input.focus().val(v);
     input.focus()

     $(".btn#illuminate").illuminate({'intensity': '0.3'
             ,'color': '#98cb00','blink': 'true'
             ,'blinkSpeed': '1200', 'outerGlow': 'true'
             ,'outerGlowSize': '30px','outerGlowColor': '#98cb00'
    });
  }
}
</script>
</head>

<body>

エラーメッセージを投稿していただければ、うまくいくかもしれません。

jquery-ui のどのバージョンを使用していますか?
Twitterのブートストラップも使用していますか？

アップデート

更新 1:`TypeError: $(...).illuminate is not a function`

ファイルパスが間違っている可能性はありますか？パスを存在しない場所に変更すると、chrome 30 の開発ツールで次のエラーが発生します。

ここに画像の説明を入力

更新 2:

jquery.illuminate.0.7.jsfirefox 22 で使用するjquery_1.9.1.jsとjquery-ui_1.10.3.js、次のエラーが発生します: 行 223TypeError: $.css(...) is undefinedを指すのは次の方法です:jquery.illuminate.0.7.js:223

$.cssHooks.boxShadowBlur = {
     get: function ( elem, computed, extra ) {
             return $.css(elem, support.boxShadow).split(rWhitespace)[5];
     },
     set: function( elem, value ) {
             elem.style[support.boxShadow]=
                 insert_into($.css(elem,support.boxShadow),value,5);                
     }
};

Firefox コンソールに、いくつかの警告/エラーメッセージが表示されました。

CSS 警告: `不明なプロパティ 'box-sizing'詳細については、この質問を参照してください
JS エラー:TypeError: $.css(...) is undefinedまだ詳細情報を探しています

jquery または jquery-ui で変更を検索しても、まだ$.css が使用されているように見える(またはhere$.css )以外の結果は得られません。jquery のソースには、関数 css も含まれています。

jQuery.fn.extend({
        css: function (name, value) {
            return jQuery.access(this, function (elem, name, value) {
                var styles, len,
                    map = {},
                    i = 0;

                if (jQuery.isArray(name)) {
                    styles = getStyles(elem);
                    len = name.length;

                    for (; i < len; i++) {
                        map[name[i]] = jQuery.css(elem, name[i], false, styles);
                    }

                    return map;
                }

                return value !== undefined ?
                    jQuery.style(elem, name, value) :
                    jQuery.css(elem, name);
            }, name, value, arguments.length > 1);
        },

詳しくは自分で質問してみます。

更新 - 解決策は、jQuery 照らすプラグインを変更することです。

ユーザー Dave は優れた仕事をし、 firefox 22 で illuminate が機能しない原因を発見しました。-ui-1-10-3 . Dave の努力、デバッグ、卓越した JavaScript と jQuery の知識に賛成票を投じてください。

score 0 · Accepted Answer

正しいパラメータが設定されていることを確認してください

JSFIDDLE http://jsfiddle.net/kevinPHPkevin/P9GXa/

$(document).ready(function(){

    $('#button').illuminate({

        'intensity': '0.3',

        'color': '#98cb00',

        'blink': 'true',

        'blinkSpeed': '1200',

        'outerGlow': 'true',

        'outerGlowSize': '30px',

        'outerGlowColor': '#98cb00'

    });

});

javascript - 要素(ボタン)を照らすテクニックやプラグインはありますか?

3 に答える 3

アップデート

更新 1:TypeError: $(...).illuminate is not a function

更新 2:

更新 - 解決策は、jQuery 照らすプラグインを変更することです。

Related

Reference

更新 1:`TypeError: $(...).illuminate is not a function`