jQueryUI的動畫（顏色）不工作

我想動畫輸入元素的背景顏色，但它不工作:(jQueryUI的動畫（顏色）不工作

的JavaScript（提交時）：

function sendImage() { 
    formularz = $('form#sendImage'); 
    autor = formularz.children('input[name=autor]'); 

    if (autor.val().length < 1 || autor.val().length > 20) { 
     console.log('start'); 
     autor.animate({ 
      backgroundColor: 'red', 
      width: '100px', 
     }, 3000, function() { 
      console.log('end'); 
     }); 
    } 
}

jQuery的liblaries：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

<link rel="stylesheet" href="jquery-ui/jquery-ui.min.css"> 
<script src="jquery-ui/external/jquery/jquery.js"></script> 
<script src="jquery-ui/jquery-ui.min.js"></script> 
<!-- I tried also this --> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

在JS功能效果很好 - 在控制檯日誌中顯示，元素的寬度也正在發生變化，但背景色沒有，它不控制檯顯示任何錯誤

。

有什麼建議嗎？

來源

2016-03-05 Invictus

不是'background-color'而不是'backgroundColor'嗎？ – 2016-03-05 19:42:02

@noob如果使用屬性名稱作爲文字，那麼你不能包含'-'，因爲它是無效的，所以你需要使用一個字符串。 jQuery非常聰明，它可以接受CSS屬性或DOM樣式屬性名稱。因此，在這種情況下，以下任何一個將工作：''background-color''，'backgroundColor'，''backgroundColor'' –

@Invictus請注意，您包括jQuery和jQueryUI的多個版本 - 您應該刪除其中的一個。 –

默認情況下，jQuery無法爲背景顏色設置動畫效果。你有兩個選擇，首先你可以使用第三方插件。其次，你可以使用CSS。後者是可取的。通過在元素上設置transition CSS規則，然後在您的jQuery代碼中添加該類，可以這樣做。

input { 
    transition: all 3s; 
} 
input.error { 
    background-color: red; 
}

function sendImage() { 
    var $formularz = $('form#sendImage'); 
    var $autor = $formularz.children('input[name=autor]'); 

    if ($autor.val().length < 1 || $autor.val().length > 20) { 
     $autor.addClass('error'); 
    } 
}

Working example

來源

2016-03-05 19:43:43

我在Javascript很肯定你需要指出你是通過其ID添加風格的元素。所以，如果你設置一個元素的ID是AUTOR它的工作使用您的if語句如下：

document.getElementById('autor').style.background-color="red";

來源

2016-03-05 19:46:51 Zaataro

但這是沒有動畫（猜測）。 – Invictus

羅裏McCrossan，我測試你的建議和'backgroundColor'效果很好，但後來我想再次檢查backgoundColor和它也有效...

所以我不知道什麼是錯的。梅比有些錯字或我忘了一些思考。對不起，我感到困惑。

來源

2016-03-05 20:46:28 Invictus

jQueryUI的動畫（顏色）不工作

回答

相關問題