我有一个Javascript函数，当调用它时，会显示CSS div #mapLoading 并添加样式 display:block。完成此操作的代码行如下：
代码#1
mapLoading.style.display = "block";
整个函数的代码在本问题底部展示。
我还有以下jQuery代码，当鼠标悬停在元素上时，它会附加CSS类.weareloading，然后在CSS3动画（旋转和淡入）完成后再删除类.weareloading。
代码#2
$("#mapLoading").hover(function(){
$(this).addClass("weareloading");})
$("#mapLoading").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
$(this).removeClass("weareloading")
})
我想要做的事情 - 也是这个问题存在的原因 - 是以下内容:
- 在Javascript函数中用Code #2替换Code #1
- 取消Code #2中鼠标悬停的要求，使得下面显示的函数只需添加类
.weareloading，然后在动画完成时删除类.weareloading。
不幸的是，整个程序比较复杂，并且包含许多文件，因此我无法在jsFiddle上提供实时示例。但是，以下是上述Javascript函数，希望可以为这个问题提供足够的背景信息：
第2行包含Code #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;
}