Плавное появление картинки при наведении на ссылку
Код:
var imgs = new Array("img1.png", "img2.png", "img3.png");
<nav>
<a href="ссылка.php" onMouseOver="sh_img(1)" onMouseOut="sh_img(0);">текст</a>
<a href="ссылка2.php" onMouseOver="sh_img(2)" onMouseOut="sh_img(0);">текст2</a>
</nav>
<div>
<img src=""img1.png" id="img">
</div>
При наведении на ссылку появляется изображение соответствующей ссылки, если вне диапазона ссылки то используеться картинка по умолчанию Подскажите пожалуйста как теперь сделать чтобы изображение менялось плавно... Пробовал сделать так... Код:
var imgs = new Array("img1.png", "img2.png", "img3.png"); |
http://api.jquery.com/category/effects/fading/
fadeIn / fadeOut не пробовали? |
j0hnik,
А не могли бы вы мне помочь, как правильно и корректно применить это в своем коде?? если вас не затруднит,,, |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<a href="ссылка.php" onMouseOver="sh_img(1)" onMouseOut="sh_img(0);">текст</a>
<a href="ссылка2.php" onMouseOver="sh_img(2)" onMouseOut="sh_img(0);">текст</a>
<img src="img0.png" id="img">
<script>
function sh_img(a){
$("#img").fadeOut( "slow", function() {
$("#img").prop('src', 'img'+a+'.jpg');
$("#img").fadeIn("slow");
});
}
</script>
</body>
</html>
img0 - это изображение по умолчанию. |
CSS3 - transition
|
j0hnik,
Я немного переделал, вы конечно я так хорошо владеете этим языком по крайней мере знаете побольше намного чем я... правильно ли будет если я немного изменил ваш код и сделал так...???
var imgs = new Array("img1.png", "img2.png", "img3.png");
function sh_img(a){
$("#img").fadeOut( "slow", function() {
$("#img").prop('src', imgs[a]);
$("#img").fadeIn("slow");
});
}
все работает отлично, спасибо огромное за помощь, А можно ли изменить интервал,чтобы появление и затухание происходило быстрее? |
Lord_Jesus_,
вместо "slow" можете указать число в мс например 1000 - эта секунда. |
j0hnik,
Спасибо за помощь |
j0hnik,
а если быстро поводить курсором по ссылкам? |
рони,
эффект был будто картинка зависала но после того как я понизил время интервала появление как посоветовал мне "j0hnik", все прорисовываеться плавно |
Lord_Jesus_,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.img {
width: 300px;
height: 200px;
background-repeat: no-repeat;
background-size: cover;
background-image: url(http://img.funtema.ru/10112015/les/5.jpg);
transition: .8s;
}
.img img{
opacity: 0;
width: 100%;
height: 100%;
transition: opacity .8s;
}
.img.show img{
opacity: 1;
}
nav a{
font-size: 42px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var src = ["https://tvoidvor.com/wp-content/uploads/TelegramDesktop-min.jpg", "https://poster.nicefon.ru/2016_06/13/800x450/33349860e2e2ea69df6fc.jpg"];
var div = $(".img");
var img = $("img", div)[0];
$("nav a").each(function(i, el) {
$(el).mouseleave(function() {
div.removeClass("show");
}).mouseenter(function() {
img.src = src[i];
div.addClass("show");
});
});
});
</script>
</head>
<body>
<nav>
<a href="ссылка.php">текст</a>
<a href="ссылка2.php">текст2</a>
</nav>
<div class="img">
<img>
</div>
</body>
</html>
|
Цитата:
var imgs = new Array("img1.png", "img2.png", "img3.png");
function sh_img(a){
$("#img")*!*.stop(true,true)*/!*.fadeOut( "slow", function() {
$("#img").prop('src', imgs[a]);
$("#img").fadeIn("slow");
});
}
|
рони,
это неудобно будет задавать картинки через JS, может лучше использовать http://htmlbook.ru/css/attr ? |
рони,
Спасибо Вам, приму за внимание |
Цитата:
|
Плавное появление картинки
laimas,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.img {
width: 300px;
height: 200px;
background-repeat: no-repeat;
background-size: cover;
background-image: url(http://img.funtema.ru/10112015/les/5.jpg);
transition: .8s;
}
.img img{
opacity: 0;
width: 100%;
height: 100%;
transition: opacity .8s;
}
.img.show img{
opacity: 1;
}
nav a{
font-size: 42px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var div = $(".img");
var img = $("img", div)[0];
$("nav a").each(function(i, el) {
var src = $(el).data("src");
$(el).mouseleave(function() {
div.removeClass("show");
}).mouseenter(function() {
img.src = src;
div.addClass("show");
});
});
});
</script>
</head>
<body>
<nav>
<a href="ссылка.php" data-src="https://tvoidvor.com/wp-content/uploads/TelegramDesktop-min.jpg">текст</a>
<a href="ссылка2.php" data-src="https://poster.nicefon.ru/2016_06/13/800x450/33349860e2e2ea69df6fc.jpg">текст2</a>
</nav>
<div class="img">
<img>
</div>
</body>
</html>
|
А чисто на CSS никак? )
|
laimas,
я незнаю таких селекторов, условно nav a:hover ~ nav + div |
Цитата:
|
Цитата:
|
laimas,
нет nav a:hover => parent + div |
Верстка не религия, можно и изменить. :)
Конечно, если не отходить "от", тогда да. |
Как вариант без <img>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<nav>
<a href="#" class="default">Default</a>
<a href="#" style="--image: url(https://placeimg.com/640/480/nature); ">Nature</a>
<a href="#" style="--image: url(https://placeimg.com/640/480/tech); ">Tech</a>
<a href="#" style="--image: url(https://placeimg.com/640/480/animals); ">Animals</a>
</nav>
<style>
body {
margin: 0;
overflow: hidden;
height: 100vh;
background: radial-gradient(circle at calc(100vw - 10rem) 25vh, #f1f1f1, #888);
}
nav {
display: grid;
grid-template-columns: 20rem;
align-content: end;
justify-content: end;
height: 100vh;
overflow: auto;
}
a {
padding: .5em 1em;
margin: .5em;
border: .1em solid;
color: deepskyblue;
text-decoration: none;
display: inline-block;
border-radius: .5em;
overflow: auto;
font: bold 200% "Helvetica Neue", "Segoe UI", Roboto, Ubuntu, sans-serif;
}
a.default {
visibility: hidden;
/* order: 1;*/
}
a::after, .default::after {
content: "";
position: fixed;
top: 0; bottom: 0;
left: 0; right: 20rem;
background:
center / cover
no-repeat #333;
background-image:
var(--image, url('https://placeimg.com/800/600/people')),
radial-gradient(#333, black);
padding: 1em;
pointer-events: none;
transition: opacity 350ms 200ms, transform 350ms 200ms, visibility 0s 550ms;
opacity: 0;
transform: scale(2);
visibility: hidden;
will-change: opacity, transform, visibility;
z-index: -1;
}
@media (max-width: 75em) {
a::after, .default::after {
right: 0rem;
}
}
.default::after {
z-index: -2;
}
a:hover::after, .default:after {
opacity: 1;
transform: scale(1);
visibility: visible;
transition: opacity 350ms, transform 350ms, visibility 0s 0s;
}
</style>
</body>
</html>
|
| Часовой пояс GMT +3, время: 14:07. |