Выплывающая картинка при клике на кнопку
Доброго времени суток. Я самый самый новичок в области разработки. Учусь самостоятельно и буду рад помощи профессионалов.
Суть проблемы такая, есть код html: <div id="wrapper"> <div id="button"> <p>Нажми меня</p> </div> <img class = "capture" src="images/1.jpg" alt=""> </div> Есть стили : Код:
#wrapper{
$(document).ready(function(){
$('#button').click(function(){
$('#button p').text('Трансформируюсь...');
$('#button').fadeOut(2000);
$('#wrapper img').animate({'width':'500px','height':'659px'},2000);
});
$('img').click(function(){
$('#button p').text('Нажми меня');
$('#button').fadeIn(2000);
$('#wrapper img').fadeOut(2000);
});
});
Собственно что я пытаюсь реализовать. Чтоб при клике на кнопку выезжала картинка. Далее при клике на картинку, она бы становилась постепенно прозрачной до 100% и лишь после этого ее ширина и высота сбрасывались в 0. Ну и чтоб при повторном нажатии на кнопку вновь появлялась картинка. Помогите советом, кому несложно. всем добра=) |
Цитата:
собери полный тестовый пример |
Сори
<!DOCTYPE HTML> <html> <head> <title>Кнопка</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="css/style.css" rel="stylesheet"> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery.js"></script> </head> <body> <div id="wrapper"> <div id="button"> <p>Нажми меня</p> </div> <img class = "capture" src="images/1.jpg" alt="Тёмка"> </div> </body> </html> |
Цитата:
|
<!DOCTYPE HTML>
<html>
<head>
<title>Выпадающее меню</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#wrapper{
width:500px;
overflow:hidden;
margin:50px auto 0 auto;
position:relative;
height:1000px;
}
#button {
width:250px;
margin:280px auto 0;
height:100px;
background-image:linear-gradient(to bottom,#79c7f3 0% , #2faef7 100%);
border-radius:15px;
cursor:pointer;
}
#button p{
text-align:center;
text-transform:uppercase;
line-height:100px;
color:#fff;
font-weight:bold;
}
.capture{
position:absolute;
top:0;
left:0;
width:0;
height:0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(){
$('#button p').text('Трансформируюсь...');
$('#button').fadeOut(2000);
$('#wrapper img').animate({'width':'500px','height':'659px'},2000);
});
$('img').click(function(){
$('#button p').text('Нажми меня');
$('#button').fadeIn(2000);
$('#wrapper img').fadeOut(2000);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="button">
<p>Нажми меня</p>
</div>
<img class = "capture" src="http://f1life.ru/img/img/news/monza_2014_vettel.jpg" alt="">
</div>
</body>
</html>
|
Надеюсь я все правильно понял
|
karssen,
:write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#wrapper{
width:500px;
overflow:hidden;
margin:50px auto 0 auto;
position:relative;
height:1000px;
}
#button {
width:250px;
margin:280px auto 0;
height:100px;
background-image:linear-gradient(to bottom,#79c7f3 0% , #2faef7 100%);
border-radius:15px;
cursor:pointer;
}
#button p{
text-align:center;
text-transform:uppercase;
line-height:100px;
color:#fff;
font-weight:bold;
}
.capture{
position:absolute;
top:0;
left:0;
width:0;
height:0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function()
{
$('#button').click(function()
{
$('#button p').text('Трансформируюсь...');
$('#button').fadeOut(2000);
$('#wrapper img').delay(1000).animate({'width': '500px', 'height': '659px'}, 2000);
}
);
$('img').click(function()
{
$('#button p').text('Нажми меня');
$('#button').fadeIn(2000);
$('#wrapper img').fadeOut(2000, function ()
{
$(this).css({'width': '0px', 'height': '0px'})
}
);
}
);
}
);
</script>
</head>
<body>
<div id="wrapper">
<div id="button">
<p>Нажми меня</p>
</div>
<img class = "capture" src="https://javascript.ru/forum/images/smilies/write.gif" alt="">
</div>
</body>
</html>
|
Благодарю,все не мог понять, как правильно записать это) Если не сложно, подскажите пожалуйста как выставить еще правильно setTimeOut. Чтобы фотография начинала анимироваться не сразу при нажатии на кнопку а с задержкой 1 секунду.
|
Цитата:
|
Спасибо, я ознакамливаюсь с документацией. Но к сожалению не сумел пока осилить весь объем. Пытался реализовать задержку через setTimeOut и не вспомнил про delay.
|
| Часовой пояс GMT +3, время: 01:00. |