創建一個可視化的餅圖（無數據），並用jQuery制作動畫

Question

我的任務是創建一個餅圖，以可視方式顯示類別，但該圖不包含任何數據，這意味着使用Google圖表或任何由數據驅動的圖表制作工具實際上不是一種選擇。 我制作了餅圖圖像，因為我希望當用戶單擊某個圖塊時，它可以滑出，然后再次單擊，它將滑回到它的位置。

我嘗試僅使用CSS來創建圖表，但我認為無法創建我希望以這種方式制作餅圖的動畫。 這些作品最終還將在其上也帶有圖標，這是我認為使用圖像效果最好的另一個原因。 代碼真的很笨拙，我不確定是否有更好的方法可以同時完成所有這些工作，但是我最受困的部分是將這些部分移回原處。

我創建了一個js小提琴（ http://jsfiddle.net/fAs7W/4/ ），以更好地了解我需要的幫助。 使用點擊功能可以將棋子從餅中移出，但是我無法弄清楚如何在第二次點擊時將棋子移回餅中。 我也嘗試使用toggleClass，但是我在那兒做錯了，因為那什么也沒做。 toggleClass位於最暗的棋子上，而click函數位於該棋子的右側。 我一直在努力解決這一問題，因此感謝您的幫助。 或者，如果您可以指出正確的方向。 我檢查了許多其他教程，但我想我缺少了一些東西，而我的JS / jQuery技能並不是我想要的。

$(document).ready(function () {
$(".medicare").click(function () {
    $(this).toggleClass(".medicareClicked");
});
$(".medicaid").click(function () {
    $(".medicaid-def").css("display", "block");
    $(".medicaid").css({
        "left": "410px",
        "top": "111px"
    });
});

}）;

http://jsfiddle.net/fAs7W/4/

Answer 1

檢查這個小提琴： http : //jsfiddle.net/fAs7W/9/

我將要添加的類重命名為“ clicked”，我們可以在CSS中使用

 .medicaid.clicked {
     left: 385px;
     top: 20px;
 }

我還從傳遞給toggleClass函數的名稱中刪除了“點”。

$(document).ready(function () {
    $(".medicaid").click(function () {
        $(this).toggleClass("clicked");
    });
});