Программирование на jquery
Anonymous
Изображение изотопного фильтра странно анимируется и трясется несколько секунд, когда я нажимаю на меню фильтра
Сообщение
Anonymous » 14 окт 2025, 10:49
Когда я нажимаю на меню фильтров, изображение контейнера анимируется, но проблема в том, что это изображение трясется несколько секунд после окончания анимации. вот эта демонстрация``
мой код здесь
Код: Выделить всё
// JavaScript
jQuery(document).ready(function($){
// Activate isotope in container
$(".portfolio_active").isotope({
itemSelector: '.single_item',
layoutMode: 'fitRows',
});
$(".portfolio_active").isotope({
filter: '*',
});
// Add isotope click function
$('.portfolio_nav li').click(function(){
$(".portfolio_nav li").removeClass("active");
$(this).addClass("active");
var selector = $(this).attr('data-filter');
$(".portfolio_active").isotope({
filter: selector,
animationOptions: {
duration:750,
easing: 'linear',
queue: false,
}
});
return false;
});
});
Код: Выделить всё
/* CSS */
.portfolio_section {
padding: 100px 0;
background: #ffffff;
}
.portfolio_nav {
margin-top: 50px;
}
.portfolio_nav li {
font-family: 'Open Sans', sans-serif;
color: #999999;
cursor: pointer;
display: inline;
font-size: 14px;
margin-right: 20px;
padding-right: 20px;
position: relative;
}
.portfolio_nav li.active {
color: #e74c3c;
}
.portfolio_nav li::before {
background: #999999 none repeat scroll 0 0;
content: "";
height: 60%;
position: absolute;
right: 0;
top: 25%;
transform: rotate(20deg);
width: 2px;
}
.portfolio_nav li:last-child::before {
display: none;
}
.portfolio_active {
margin-top: 45px;
}
.single_item {
width: 25%;
float: left;
position: relative;
transition: 0.5s ease-in-out;
}
Код: Выделить всё
RECENT WORKS
It has survived not only five centuries, but also the leap scrambled it to make a type.
[list]
[*]ALL
[*]PRINT DESIGN
[*]ANIMATION
[*]ART
[*]WEB DESIGN
[*]PHOTOGRAPHY
[*]VIDEO
[/list]
[img]images/portfolio/2.jpg[/img]
[h4]T-SHIRT DESIGN[/h4]
art / t-shirt
[img]images/portfolio/3.jpg[/img]
[img]images/portfolio/4.jpg[/img]
[img]images/portfolio/5.jpg[/img]
[img]images/portfolio/6.jpg[/img]
[img]images/portfolio/7.jpg[/img]
[img]images/portfolio/8.jpg[/img]
[img]images/portfolio/1.jpg[/img]
Подробнее здесь:
https://stackoverflow.com/questions/399 ... ick-on-the
1760428140
Anonymous
Когда я нажимаю на меню фильтров, изображение контейнера анимируется, но проблема в том, что это изображение трясется несколько секунд после окончания анимации. вот эта демонстрация`` мой код здесь [code]// JavaScript jQuery(document).ready(function($){ // Activate isotope in container $(".portfolio_active").isotope({ itemSelector: '.single_item', layoutMode: 'fitRows', }); $(".portfolio_active").isotope({ filter: '*', }); // Add isotope click function $('.portfolio_nav li').click(function(){ $(".portfolio_nav li").removeClass("active"); $(this).addClass("active"); var selector = $(this).attr('data-filter'); $(".portfolio_active").isotope({ filter: selector, animationOptions: { duration:750, easing: 'linear', queue: false, } }); return false; }); });[/code] [code]/* CSS */ .portfolio_section { padding: 100px 0; background: #ffffff; } .portfolio_nav { margin-top: 50px; } .portfolio_nav li { font-family: 'Open Sans', sans-serif; color: #999999; cursor: pointer; display: inline; font-size: 14px; margin-right: 20px; padding-right: 20px; position: relative; } .portfolio_nav li.active { color: #e74c3c; } .portfolio_nav li::before { background: #999999 none repeat scroll 0 0; content: ""; height: 60%; position: absolute; right: 0; top: 25%; transform: rotate(20deg); width: 2px; } .portfolio_nav li:last-child::before { display: none; } .portfolio_active { margin-top: 45px; } .single_item { width: 25%; float: left; position: relative; transition: 0.5s ease-in-out; }[/code] [code] RECENT WORKS It has survived not only five centuries, but also the leap scrambled it to make a type. [list] [*]ALL [*]PRINT DESIGN [*]ANIMATION [*]ART [*]WEB DESIGN [*]PHOTOGRAPHY [*]VIDEO [/list] [img]images/portfolio/2.jpg[/img] [h4]T-SHIRT DESIGN[/h4] art / t-shirt [img]images/portfolio/3.jpg[/img] [img]images/portfolio/4.jpg[/img] [img]images/portfolio/5.jpg[/img] [img]images/portfolio/6.jpg[/img] [img]images/portfolio/7.jpg[/img] [img]images/portfolio/8.jpg[/img] [img]images/portfolio/1.jpg[/img] [/code] Подробнее здесь: [url]https://stackoverflow.com/questions/39941319/isotope-filter-image-strange-animate-and-shaking-few-second-when-i-click-on-the[/url]