Добавить анимацию
Здравствуйте.
Есть такой костыльный скрипт
<img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive ani" id="nsv_mv_id{{ product.product_id }}" {% if product.thumb2 %}onmouseover="document.getElementById('nsv_mv_id{{ product.product_id }}').src='{{ product.thumb2 }}'" onmouseout="document.getElementById('nsv_mv_id{{ product.product_id }}').src='{{ product.thumb }}'"{% endif %}>
Нужно туда приделать анимацию. Но как это сделать... |
Цитата:
|
Цитата:
Потому что вот так не очень смотриться... https://nimb.ws/xImHATn я пробовал добавить так: .fade(250) но не сработало... |
И почему то работает только через document.getElementById
|
жаль конечно что в js не продумали вызов через элемент. Придется работать через скрипт...
|
StartGames,
Это: onmouseover="document.getElementById('nsv_mv_id{{ product.product_id }}').src='{{ product.thumb2 }}'" ты можешь заменить на: onmouseover="this.src='{{ product.thumb2 }}'" или вообще на: onmouseover="src='{{ product.thumb2 }}'" А анимация смены картинки никогда не существовала, слишком заморочено с технической точки зрения. Можно по-быстрому изобразить что-то такое из двух картинок если у них одинаковые размеры, но придётся поверстать если случай не самый простой:
<body>
--
<img
width="100"
height="100"
class="img-responsive ani img-bottom"
src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif"
/><img
width="100"
height="100"
class="img-responsive ani img-top"
src="https://javascript.ru/forum/image.php?u=4993&dateline=1299014303"
/>
--
<style>
.img-bottom {
position:absolute;
z-index: -1;
}
.img-top {
opacity: 0;
transition: 1s opacity;
}
.img-top:hover {
opacity: 1;
}
</style>
</body>
|
Цитата:
<head>
<style>
img {
width: 200px;
opacity: 1;
transition: opacity 0.5s;
}
img.hide {
opacity: 0;
}
</style>
</head>
<body>
<img src="https://img.freepik.com/free-photo/view-of-adorable-kitten-with-simple-background_23-2150758096.jpg?size=626&ext=jpg&ga=GA1.1.2029024492.1713601918&semt=ais"
data-img2="https://img.freepik.com/free-photo/closeup-vertical-shot-of-a-cute-european-shorthair-cat_181624-34587.jpg?size=626&ext=jpg&ga=GA1.1.2029024492.1713601918&semt=ais">
<script>
const el = document.querySelector('img');
const img1 = new Image();
img1.src = el.src;
const img2 = new Image();
img2.src = el.dataset.img2;
el.addEventListener('mouseenter', ({target}) => {
target.classList.add('hide');
target.addEventListener('transitionend', () => {
target.src = img2.src;
target.classList.remove('hide');
}, {once:true})
})
el.addEventListener('mouseleave', ({target}) => {
target.classList.add('hide');
target.addEventListener('transitionend', () => {
target.src = img1.src;
target.classList.remove('hide');
}, {once:true})
})
</script>
</body>
|
voraa,
после run добавляй пожалуйста высоту окна просмотра run height=500 |
Цитата:
|
voraa, можно, но надо ещё не забыть добавить ожидание onload для второй картинки, потому что может возникнуть некрасивый эффект если загрузка тормознёт.
Также, если картинки большие, то надо будет хакать с незаметной предварительной вставкой на страницу, потому что скорость первой отрисовки уже загруженной картинки хоть и почти моментальная, но всё же именно почти и может вызвать очень краткое мигание. Кстати в качестве хака от такого мигания помогает createImageBitmap после onload перед вставкой, но это чисто эмпирическое знание, не подкреплённое доками.:) |
| Часовой пояс GMT +3, время: 10:57. |