#mapLoading呼び出されると、CSS divを表示し、スタイルを追加するJavascript関数があります display:block。このアクションを完了するコード行は次のとおりです。
コード＃1
mapLoading.style.display = "block";
関数全体は、この質問の下部に示されています。
.weareloadingまた、要素がマウスでホバーされたときにCSSクラスを追加し.weareloading、CSS3アニメーション（回転とフェードイン）が完了するとクラスを削除する次のjQueryコードもあります。
コード＃2
$("#mapLoading").hover(function(){
$(this).addClass("weareloading");})
$("#mapLoading").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
$(this).removeClass("weareloading")
})
私がやりたいこと、そしてこの質問の理由は次のとおりです。
- Javascript関数でコード＃1をコード＃2に置き換えます
- コード＃2のマウスホバリング要件を削除して、以下に表示される関数が単にクラスを追加し、アニメーションが完了したらクラス
.weareloadingを削除するようにします。.weareloading
残念ながら、プログラム全体が複雑で多くのファイルを保持しているため、jsFiddleで実際の例を提供することはできません。ただし、上記のJavascript関数は、この質問に十分なコンテキストを提供するはずです。
2行目にはコード＃1が含まれています
function doSearch(keyword, type) {
mapLoading.style.display = "block";
currentCategory = type;
var icon;
if (markerGroups[type]) {
for (var i = 0; i < markerGroups[type].length; i++) {
markerGroups[type][i].setMap(null);
}
markerGroups[type].length = 0;
}
if (keyword.substr(0,3) == "db:"){
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var swLat = southWest.lat();
var swLng = southWest.lng();
var neLat = northEast.lat();
var neLng = northEast.lng();
var dbCat = keyword.substr(3);
var filename = dbPath + "db.php?cat="+ dbCat + "&swLat="+ swLat + "&swLng="+ swLng + "&neLat="+ neLat + "&neLng="+ neLng + "&extendLat="+ extendLat + "&extendLng="+ extendLng;
$.getJSON(filename, function(data) {
var hider = document.getElementById(type).getAttribute("caption");
if (hider != "hidden") {
for (i = 0; i < data.results.length; i++) {
var result = data.results[i];
if (result.icon === "" ) {
icon = type;
} else {
icon = result.icon;
}
cleanHTML = html_entity_decode(result.html);
var xmlHTML = createXmlHTML(result.address, result.name, cleanHTML, result.url, result.geometry.location.lat, result.geometry.location.lng);
var latlng = new google.maps.LatLng(parseFloat(result.geometry.location.lat), parseFloat(result.geometry.location.lng));
createMarker(latlng, i, xmlHTML, type, icon, "db", result.name);
}
}
mapLoading.style.display = "none";
});
} else {
var hider = document.getElementById(type).getAttribute("caption");
if (type == "user") {
var userName = document.getElementById(type).getAttribute("name");
if (userName === null) {
hider = "hidden";
} else {
keyword = "establishment";
searchName = userName;
}
}
if (hider != "hidden") {
var searchName = document.getElementById(type).getAttribute("name");
if (searchName === null){
searchName = "";
} else {
searchName = "&name=" + searchName;
}
var ctr = map.getCenter();
//alert("Center: " + ctr)
var jsonLAT = ctr.lat();
var jsonLNG = ctr.lng();
if (autoRadius === true){
searchRadius = distance( map.getBounds().getNorthEast().lat(), map.getBounds().getNorthEast().lng(), map.getBounds().getSouthWest().lat(), map.getBounds().getSouthWest().lng());
}
var JSON = dbPath + "jsonproxy.php?url=" + encodeURIComponent("https://maps.googleapis.com/maps/api/place/search/json?location=" + jsonLAT + "," + jsonLNG + "&radius=" + searchRadius + "&types=" + keyword + searchName + "&sensor=false");
$.getJSON(JSON, function(data) {
for (i = 0; i < data.results.length; i++) {
var result = data.results[i];
var latlng = new google.maps.LatLng(parseFloat(result.geometry.location.lat), parseFloat(result.geometry.location.lng));
var resultHTML = "api:" + result.reference;
createMarker(latlng, i, resultHTML, type, type, "api", result.name, result.icon);
if (hider == "hidden") {
markerGroups[type][i].hide();
}
}
mapLoading.style.display = "none";
});
}
}
return 1;
}