在y軸上旋轉時使用jquery動畫改變一個圓的顏色

我是新來的j查詢我想旋轉一個180度的Y軸圓，0到90度的粉紅色背景色並有90到180度的紅色背景色，沒有顏色的組合。我插入Ĵ查詢的用戶界面和編寫代碼在y軸上旋轉時使用jquery動畫改變一個圓的顏色

html 
<body> 
<div></div> 
</body>

和我的CSS是：

css 
body { 
} 
div 
{ 
height:100px; 
width:100px; 
border-radius:100%; 
background-color:pink; 
transition:all ease-in-out 2s; 
}

和我的Java腳本代碼是：

$(function() { 
$("div").click(function() { 

    $(this).animate({ 
    backgroundColor: "blue", 

    }, { 
     duration: 0, 
     step: function (now, fx) { 


      $(this).css('transform', 'rotateY(180deg)'); 

     } 

    }); 

}); 

});

，我不知道如何定義0到90度的粉色背景和定義90到180度的紅色背景。

我很感激，如果有人可以幫助使用jQuery UI的

來源

2015-08-15 neda Derakhshesh

嘗試，代csstransform值transform爲all，利用的.animate()start選項來設置的divtransform屬性，設置的divbackgroundColor當內propsnow動畫對象大於89或等於90

$(function() { 
 

 
    $("div").click(function() { 
 
    var el = this 
 
    , n = 180; 
 

 
    $({props: 0}) 
 
    .animate({ 
 
     props: n, 
 
     }, { 
 
     start: function() { 
 
      $(el).css("transform", "rotateY(" + n + "deg)") 
 
     }, 
 
     easing: "linear", 
 
     step: function(now, fx) { 
 
      if (Math.round(now) > 89 || Math.round(now) === 90) { 
 
      el.style.backgroundColor = "red"; 
 
      } 
 
     }, 
 
     duration: 2000 
 
     }); 
 
    }); 
 

 
});

div { 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100%; 
 
    background-color: pink; 
 
    transition: transform ease-in-out 2s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 
<body> 
 
    <div></div> 
 
</body>

來源

2015-08-15 16:33:31 guest271314

真的很感謝你。你做得太多了，我感謝你的時間和知識。謝謝你一千次。但是因爲我對j查詢很陌生，所以我很難理解它。可能有一天我成爲那麼多職業。它解決了。我應該感謝你們所有人:)而且我也是新來堆疊流。如果有什麼我可以做的，以促進你的激活，請讓我知道。再次感謝你 –

，但你會告訴我什麼是這條線的用途？ $（{props：0}） .animate（{{0} {0} {0} {0} {}}，{ –

@nedaDerakhshesh'.animate（）'可以在任何jQuery對象上調用;在$（{props：0}）。 animate（）{props：n，}'props'是'this'對象在'.animate（）'初始值設置爲'0'，'n'設置爲'180'，'.animate（）從'0'增加'props'到'180' – guest271314

作爲替代的JavaScript溶液，CSS動畫可用於實現期望的結果，除了反應到你仍然使用JavaScript爲點擊事件：

$(function() { 
    $("div").click(function() { 
     $(this).toggleClass('spinClass'); 
    }); 
});

CSS

div { 
    height:100px; 
    width:100px; 
    border-radius:100%; 
    background-color:pink; 
} 

div.spinClass { 
    animation-name: spinimation; 
    animation-duration: 1s; 
    animation-timing-function: linear; 
    background-color: red; 
} 

@keyframes spinimation{ 
    0% {background-color: pink; transform: rotateY(0deg);} 
    50% {background-color: pink; transform: rotateY(90deg); } 
    100% {background-color: red; transform: rotateY(180deg);} 
}

你可以玩在this fiddle

來源

2015-08-15 16:52:56

我真的不知道如何去做謝謝你，你對我做了很多，謝謝你謝謝你，謝謝你，我是新來的人，如果有什麼事要做，以促進你的激活，請讓我知道，再次感謝你。 –

然後歡迎來到這裏:)我們不是真的在這裏宣傳自己，我們只是想在未來讓其他人更容易找到最有幫助的答案。如果答案以某種方式幫助你，你可以通過點擊答案上的向上箭頭來「投票」，似乎你已經想出瞭如何接受答案。這就是所有這一切 –

這兩個答案都是正確和有用的。再次感謝 –

在y軸上旋轉時使用jquery動畫改變一個圓的顏色

回答

相關問題