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;