diff --git a/waifu-tips.js b/waifu-tips.js
index 40058ea..118cdd1 100755
--- a/waifu-tips.js
+++ b/waifu-tips.js
@@ -49,7 +49,7 @@ function loadWidget(waifuPath, apiPath) {
$("#waifu").css({ bottom: -500 });
setTimeout(() => {
$("#waifu").hide();
- $("#waifu-toggle").show().animate({ "margin-left": -50 }, 1000);
+ $("#waifu-toggle").addClass("waifu-toggle-active");
}, 3000);
});
var devtools = () => {};
@@ -220,17 +220,11 @@ function loadWidget(waifuPath, apiPath) {
function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") {
if (screen.width <= 768) return;
- document.body.insertAdjacentHTML("beforeend", `
+ document.body.insertAdjacentHTML("beforeend", `
看板娘
`);
- $("#waifu-toggle").hover(() => {
- $("#waifu-toggle").animate({ "margin-left": -30 }, 500);
- }, () => {
- $("#waifu-toggle").animate({ "margin-left": -50 }, 500);
- }).click(() => {
- $("#waifu-toggle").animate({ "margin-left": -100 }, 1000, () => {
- $("#waifu-toggle").hide();
- });
+ $("#waifu-toggle").click(() => {
+ $("#waifu-toggle").removeClass("waifu-toggle-active");
if ($("#waifu-toggle").attr("first-time")) {
loadWidget(waifuPath, apiPath);
$("#waifu-toggle").attr("first-time", false);
@@ -240,7 +234,10 @@ function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") {
}
});
if (localStorage.getItem("waifu-display") && Date.now() - localStorage.getItem("waifu-display") <= 86400000) {
- $("#waifu-toggle").attr("first-time", true).css({ "margin-left": -50 });
+ $("#waifu-toggle").attr("first-time", true);
+ setTimeout(() => {
+ $("#waifu-toggle").addClass("waifu-toggle-active");
+ }, 0);
} else {
loadWidget(waifuPath, apiPath);
}
diff --git a/waifu.css b/waifu.css
index 45b1ef1..5724a7a 100755
--- a/waifu.css
+++ b/waifu.css
@@ -6,12 +6,22 @@
cursor: pointer;
font-size: 12px;
left: 0;
+ margin-left: -100px;
padding: 5px 2px 5px 5px;
position: fixed;
+ transition: margin-left 1s;
width: 60px;
writing-mode: vertical-rl;
}
+#waifu-toggle.waifu-toggle-active {
+ margin-left: -50px;
+}
+
+#waifu-toggle.waifu-toggle-active:hover {
+ margin-left: -30px;
+}
+
#waifu {
bottom: -1000px;
left: 0;