jQuery - 使用動畫在div上切換背景色仍然需要幫助19.02.2012

我希望避免使用css轉換。jQuery - 使用動畫在div上切換背景色仍然需要幫助19.02.2012

我有三個相同類的div。我試圖在單擊時切換一個div的背景顏色。當再次點擊div時，或者其他點擊時，我希望它恢復爲默認值。

我已經包含jQuery顏色插件，併成功改變點擊顏色。我相信我的條件是錯誤的，這就是爲什麼當我點擊其他div時不能改變顏色。

這是我做了什麼：

<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>

試試這個。如果你想使用CSS，CSS3也可以提供幫助。

有3個div，當你點擊其中一個時，它會變成藍色。當你點擊其他div時，藍色會變成紅色，點擊其中一個會變藍。如果你點擊藍色，它會變回藍色。

<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 2012-02-17 00:02:25

我又添加了一個代碼。一探究竟。 – littlealien 2012-02-17 00:16:10

現在我們在談論。這看起來不錯。我必須嘗試一點，但我認爲這可能就是它。這將工作在ie？我猜即時排序下第一個css行「過渡：」 – Studiostefan 2012-02-17 00:23:37

background-color不能使用jQuery默認動畫。您需要使用插件，例如jQuery Color，它是jQuery UI的一部分。

然後，你可以用toggle()做到這一點：

HTML

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

CSS

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

$('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 2012-02-16 23:50:39

請參閱使用代碼編輯。 – elclanrs 2012-02-17 00:02:25

好的。感謝您的輸入，但問題不是改變或動畫的div的顏色。問題是改變幾個相同的div中的一個的顏色，並且當我點擊其他div的其中一個時，使其改變回來。 – Studiostefan 2012-02-17 00:14:21

jQuery - 使用動畫在div上切換背景色仍然需要幫助19.02.2012

回答

相關問題