2015-08-29 8 views
-1

Код:Google Maps не FadeIn, когда я нажимаю на кнопку

<!DOCTYPE html> 
<html> 
<head> 
<title>Google Maps</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<style type="text/css"> 
#button { 
appearance: none; 
-moz-appearance: none; 
-webkit-appearance: none; 
height: 50px; 
width: 150px; 
left: 50%; 
top: 50%; 
position: absolute; 
margin-top: -25px; 
margin-left: -75px; 
border-radius: 5px; 
color: white; 
background-color: #4081FB; 
font-size: 18px; 
border: solid 1px #4081FB; 
} 
#button:hover { 
cursor: pointer; 
} 
#map { 
visibility: hidden; 
position: absolute; 
background-size: cover; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#button").click(function() { 
$("#map").fadeIn("slow"); 
}); 
}); 
</script> 
</head> 
<body> 
<input type="button" id="button" value="Open Map" /> 
<div id="map"> 
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d26496.05743213355!2d151.12773775!3d-33.88946895!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sau!4v1439976442653" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 
</div> 
</body> 
</html> 

Я не знаю, почему, когда я нажимаю на кнопку «Открыть на карте», Google Maps не не выцветает в Я включил Google Maps в скрипт и использовал jQuery fadeIn, однако карта не исчезает, когда я нажимаю кнопку. Кто-нибудь может мне помочь? Благодарю.

+0

Вы видите ошибки в консоли? –

+0

Извините, 'видимость скрыта' Возникает проблема. измените его на 'display: none'. –

+0

Спасибо, однако знаете ли вы, почему карта не покрывает всю страницу, хотя у меня есть размер фона: обложка; ? –

ответ

0

Поскольку вы используете свойство видимости для скрытия этого элемента, оно не будет работать с .fadeIn(). Лучше вы можете использовать display:none, чтобы скрыть его. Или вы можете установить непрозрачность 0 на этот элемент, а затем использовать .animate('opacity',1) для достижения желаемого.

Смежные вопросы