我遇到了jquery的问题。问题是,我在" .info"上做了一个动画。 div box。我希望它滑入文档然后在取消选择按钮时再次滑出 - 滑动工作正常,但是当您取消选择时会有20秒左右的延迟。我不知道这种延迟来自哪里。你能救我吗?
链接是:http://ljensenphoto.dk/dokken/dokken.html
Javascript代码(对不起评论 - 我写过这些来帮助自己,我显然是Javascript和jquery的新手:D):
$(document).on("ready");
//to variabler - kan ændre værdien.
var selected;
var info;
//to konstante. Her definerer vi værdien af de to cirklers farver :D. Den første definerer hvilken farve cirklen skal have når der IKKE er klikket på den. Den anden definerer hvilken farve cirklen skal have, når vi har klikket på den.
const colorNeutral = "";
const colorSelected = "#d8ff00";
//loader SVG ind i dokumentet. Det første er "selectoren", der vælger noget i DOM - HTML'en. "" = Strings.
$("#dokkenkort").load("Dokken.svg", loadSvg);
//loader JSON ind i dokumentet
function loadSvg(){
$.getJSON("dokken.JSON", loadJSON);
}
function loadJSON(data) {
info = data;
$("#info g").on("click", circleClick);
}
function circleClick(event) {
console.log("Det virker sguda!!!!");
if (event.delegateTarget == selected) {
console.log("Klikkede på det samme som allerede er valgt!");
// Gør så sidste klik bliver glemt og nulstilles.
$(selected).children().attr("fill", colorNeutral);
//Følgende giver en ekstra attribut til en selector.
//$(selected).children().attr("r", 6);
// Glemmer hvad der blev selected
selected = null;
$(".info").animate({top:"1000px"},500,clear);
// Clearer info-div-boksen
function clear(){$(".info").text("");}
} else {
console.log("klik på et nyt element!");
// Disabler forrige selection.
$(selected).children().attr("fill", colorNeutral);
//Følgende giver en ekstra attribut til en selector.
//$(selected).children().attr("r", 6);
// husker hvad der blev selected (bliver gemt i "selected" som vi defineret som en variabel øverst)!
selected = event.delegateTarget;
console.log(selected.id)
// mark selected
$(selected).children().attr("fill", colorSelected);
// display info on selected
showInfo();
}
}
//udskriver teksten!
function showInfo( ) {
// find info in info-array
$.each(info, findSelectedInfo);
console.log("Hey man! FindSelectedInfo");
}
function findSelectedInfo(key, value) {
if (value.sted == selected.id) {
console.log("Indeni if");
$(".info").html("<h1>"+value.overskrift+"</h1>");
$(".info").append("<p>"+value.tekst+"</p>");
$(".info").append("<img src='"+value.billed+"' alt='"+value.sted+"'>");
}
$(".info").animate({top:"500px"},3000);
}
提前致谢!
祝你好运 Kalle Jensen。