2

作業中の小さな div オブジェクトに小さな .fadeTo 効果を追加しようとしていますが、できるかどうか、どこに追加すればよいかわかりません。このエフェクトをすべての div に追加したいと考えています。.fadeTo(500)にしてほしい

これは私のjsfiddleへのリンクです:

$(document).ready(function() {
    $('div').bind("mouseenter", function(){
        var color  = $(this).css("background-color");


        $(this).css("background", "#53b9ab");


        $(this).bind("mouseleave", function(){
            $(this).css("background", color);

        })    
    })    
})

私が探している効果は、ソーシャル メディアのアイコンに使用されます。私が望む正確な効果は、これらのソーシャル メディアのアイコンで見つけることができますhttp://www.coletownsend.com

4

3 に答える 3

1

使用できます。jQuery関数をアニメーション化します。

説明: CSS プロパティのセットのカスタム アニメーションを実行します。

この例を参照してください。

私はあなたのコードを編集しました。ここで結果を参照し、HTML と Javascript コードを確認してください。

これは jQuery コードです:

var color;
var fadeTime = 200;

$('div').bind("mouseenter", function(){
    color  = $(this).css("background-color");
    $(this).animate({backgroundColor: "#53b9ab"}, fadeTime);
});

$("div").bind("mouseleave", function(){
    $(this).animate({backgroundColor: color}, fadeTime);           
});
于 2013-02-08T05:09:56.247 に答える
0

あなたの質問を正しく理解できたら、それをホバー機能に適用する必要があります。

$("div").hover(function(){
    $("div").css("background-color", "orange").fadeIn("slow");
}, function() {
    $("div").css("background-color", "lime").fadeOut("slow");
});

コードに応じて、次のように調整できます。

$(document).ready(function() {
     $('div').bind("mouseenter", function(){
            var color  = $(this).css("background-color");
            $(this).css("background", "#53b9ab").fadeIn('slow', 0.7); 
            $(this).bind("mouseleave", function(){
                $(this).css("background", color).fadeTo('slow', 0.5); // partial fading
            });    
        });   
});
于 2013-02-08T05:09:06.760 に答える
0

これらの2行を既存のコードに追加することで、あなたが何を望んでいるかを正しく理解していれば、それを実現できます。

$(document).ready(function() {
    $('div').bind("mouseenter", function(){
        var color  = $(this).css("background-color");

      $(this).css("background", "red");
      $(this).css("opacity", 0);  
      $(this).fadeTo(500,1);


    })    
})
于 2013-02-08T05:34:22.853 に答える