2

現在、誰もが 2 つの解決策について話しています。

  1. jQuery UI プラグイン --> スペースを使いすぎて実行不可能
  2. jQuery Color (http://api.jquery.com/animate/) --> ダウンロードするプラグインへのリンクを実際に取得できないため、実行できません

私の質問は、jQuery v1.7.2 でこの効果を可能にするために使用できる最小のプラグインは何ですか?

4

6 に答える 6

3

jQuery ColorGitHub リポジトリからプラグインを取得できます。

span.value {
  background-color: #0f0;
}


$("span.value").animate({
  backgroundColor: "transparent"
}, 'slow');

jQuery Color を使用した実際の例をご覧ください。

CSS3 トランジションを利用することもできます。

span.value {
  background-color: #0f0;
  -o-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -webkit-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.fade {
  background-color: transparent;
}


$("span.value").toggleClass("fade");

CSS·トランジションを使用した実際の例をご覧ください。

于 2012-12-02T14:42:13.067 に答える
2

最終的に jQuery カラー プラグインを使用しないことを選択した場合は、CSS トランジションを使用できます。

<button id="fadeTrigger">fade with jQuery <span>(and CSS...)</span></button>

<div id="target" class="base">
    <p>some text in the targetted div element</p>
</div>​

そしてjQuery：

$('#fadeTrigger').click(
    function(){
        $('#target').toggleClass('base highlighted');
    });​

そしてCSS：

button {
    font-size: 1em;
}

button span {
    font-size: 0.6em;
    font-style: italic;
}

#target.base {
    background-color: #fff;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

#target.highlighted {
    background-color: #f90;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

JS フィドルのデモ。

于 2012-12-02T14:51:14.917 に答える
0

色を薄くするための非常に単純な jQuery プラグインを作成しました。少し磨く必要があるかもしれませんが、それはあなたが求めているものだと思います. ここで確認できます: https://gist.github.com/4569265

于 2013-01-22T23:53:54.997 に答える
0

試したことはありませんが、rgba でアニメートできるかもしれません

rgba(0, 255, 0, 1) => rgba(0, 255, 0, 0)

于 2012-12-02T14:43:30.410 に答える
0

あなたはアニメーション試行でこれを行うことができます

 $('span').animate({'backgroundColor' : '#ffff99'});

または試す

 $("span").fadeOut("slow").css("background-color", "#ffff99");
于 2012-12-02T14:48:26.520 に答える
0

これらのプラグインを使用できます

<script type="text/javascript" src=""></script>

headダウンロードする必要はありません。

試す

 $(this).animate({ backgroundColor: '#HEXCODE' }, 'fast');

opacityまたは、ホバー時に CSS でプロパティを使用できます。

 #id{
   opacity:1;
  }

 #id:hover{
   opacity: 0.8;
 }
于 2012-12-02T14:52:43.530 に答える