jQuery - アニメーションを使用してdivの背景色を切り替えるにはまだヘルプが必要です19.02.2012

CSSトランジションを使用しないでください。jQuery - アニメーションを使用してdivの背景色を切り替えるにはまだヘルプが必要です19.02.2012

私は同じクラスの3つのdivを持っています。クリックしたときに1つのdivの背景色を切り替えようとしています。 divをもう一度クリックするか、もう一方をクリックするとデフォルトに戻ります。

私はjQueryのカラープラグインを含め、クリック時に色を変更することに成功しました。私は私の条件が間違っていることを信じて、他の部門をクリックしたときに色を元に戻すことができない理由を考えます。

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    $('.link').click(function() { 
     var $me = $(this); 
     if ($me.css("background-color") == "#993") { 
      $me.animate({backgroundColor:"#246"}, 500); 
     } else { 
      $(".link").each(function() { 
       if ($(this) != $me) { 
        if ($(this).css("background-color") == "#246") { 
         $(this).animate({backgroundColor:"#993"}, 500); 
        } 
       } 
      }); 
      $me.animate({backgroundColor:"#246"}, 500); 
     } 
    }); 
}); 
</script> 
<style type="text/css"> 
.link { 
    width:100px; 
    padding:10px; 
    background-color:#993; 
    float:left; 
    display:inline; 
    text-align:center; 
} 
</style> 
</head> 
<body> 
    <div class="link">link</div> 
    <div class="link">link2</div> 
    <div class="link">link3</div>

を私はいくつかのトラブル助けのためのbackgroundColor conseptと希望を理解することがあった：

これは私がやったものです。 :)

ありがとう！

出典

2012-02-16 Studiostefan

<script type="text/javascript"> 
function animateBackgroundColor() { 
    $('.foo').toggleClass('fooAct'); 
} 
$(document).ready(function(){ 
    $('.foo').click(function(){ 
     animateBackgroundColor(); 
    }); 
}); 
</script> 
<style> 
div { 
height:200px; 
} 
.foo { 
transition: background-color 2s; 
-moz-transition: background-color 2s; /* Firefox 4 */ 
-webkit-transition: background-color 2s; /* Safari and Chrome */ 
-o-transition: background-color 2s; /* Opera */ 
background-color: red; 
} 
.fooAct { 
background-color:blue; 
} 
</style> 
<div class="foo"></div>

これを試してみてください。 CSS3も同様にCSSを使いたい場合に役立ちます。

3つのdivがあり、そのうち1つをクリックすると青色になります。他の部門をクリックすると、青は赤くなり、クリックされた青は青になります。青色をクリックすると、青色に戻ります。

<script type="text/javascript"> 
function animateBackgroundColor(obj) { 
    $(obj).toggleClass('fooAct'); 
    $('.fooAct').not(obj).removeClass('fooAct'); 

} 
$(document).ready(function(){ 
    $('.foo').click(function(){ 
     animateBackgroundColor(this); 
    }); 
}); 
</script> 
<style> 
div { 
height:100px; 
margin-bottom:10px; 
} 
.foo { 
transition: background-color 1s; 
-moz-transition: background-color 1s; /* Firefox 4 */ 
-webkit-transition: background-color 1s; /* Safari and Chrome */ 
-o-transition: background-color 1s; /* Opera */ 
background-color: red; 
} 
.fooAct { 
background-color:blue; 
} 
</style> 
<div class="foo"></div> 
<div class="foo"></div> 
<div class="foo"></div>

出典

2012-02-16 23:52:06 littlealien

私はこのフェードが好きですが、問題は実際にdivの色を前後に変更するのではなく、同じクラスの別のdivをクリックするときにクリックしたdivを色を変更するようにすることです。入力いただきありがとうございます。 :) – Studiostefan

もう1つのコードを追加しました。見てみな。 – littlealien

今話しています。これは素晴らしく見えます。私は少し実験しなければならないが、これはちょうどそれかもしれないと思う。これはうまくいくのだろうか？私はつまり、最初のCSSの行の下に並べ替えると思う "移行：" – Studiostefan

background-colorは、デフォルトでjQueryでアニメーション表示することはできません。 jQuery UIの一部であるjQuery Colorなどのプラグインを使用する必要があります。

次に、あなたがtoggle()でそれを単に行うことができます。

HTML

<div></div> 
<button>Color</button>

CSS

div { 
    height: 50px; 
    width: 50px; 
    background: #ff0000; 
}

jQの

$('button').toggle(function(){ 
    $('div').animate({'background-color': '#00ff00'}); 
}, function(){ 
    $('div').animate({'background-color': '#ff0000'}); 
});

例 http://jsfiddle.net/kh6pj/1/

出典

2012-02-16 23:47:45 elclanrs

はい、私はそれを持っています。私はプラグインが含まれているとそれを言及している必要があります。私はそれをクリックして色をアニメーション化するように管理しましたが、他のdivをクリックするとアニメーション化されませんでした。私の条件は間違っていると思う。 – Studiostefan

コードで編集するを参照してください。 – elclanrs

入力いただきありがとうございますが、問題はdivの色を変更またはアニメーション化していません。問題は、いくつかの同一のdivのうちの1つの色を変更し、他のdivの1つをクリックしてshureを元に戻すようにすることです。 – Studiostefan

jQuery - アニメーションを使用してdivの背景色を切り替えるにはまだヘルプが必要です19.02.2012

答えて

関連する問題