$(window).on('load')
$('все_дочерние_блоки_в_isotope img').imagesLoaded(function () {
стартуем isotope
});
$(_слайдер_)
.slick({
_настройки_
})
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
// Допустим, сейчас KFC и у него уже есть класс active при инициализации. Он идет первым с индексом 0.
// У логотипов класс 'logo'.
// Вторым идет МакДак с индесом 1.
// currentSlide при инициализации (если не указано другого = 0).
$(.logo).eq(nextSlide).addClass('active').siblings().removeClass('active');
})
.on('afterChange', function (event, slick, currentSlide) {
// если то же самое нужно не до смены слайда, а после... но тут нет параметра nextSlide, здесь мы видим только текущий слайд currentSlide
});
<input type="hidden" value="">
, и в его value вписываю все данные с удобными разделителями (чтоб потом парсить удобно было), а отправляю по финальному submit.<a href="index.php?page=approach&anc=1">Ссылка</a>
, тут сделал &
.window.location.href.split('&')[1]
и анимируем страницу до блока, соответствующего якорю anc=1
, на этот же триггер можно повесить то, какая вкладка будет открыта.<a href="моя_другая_страница.html#якорь">Link</a>
<!-- на другой странице -->
<div id="якорь"></div>
var hash = window.location.hash;
if (hash == '' || $(hash).length == 0) return true;
setTimeout(function() {
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function () {
window.location.hash = hash;
});
}, 100);
$(function)()
для каждой функции. Все можно писать в ней.if ($('.map-one').length) {
ymaps.ready(init);
}
if ($('.recall__slider').length) {
$('.recall__slider').slick({
dots: true,
nextArrow: '<button type="button" class="slick-next"><i class="fa fa-angle-right"></i></button>',
prevArrow: '<button type="button" class="slick-prev"><i class="fa fa-angle-left"></i></button>'
});
}
$('[data-pop]').click(function() {
var popName = $(this).attr('data-pop'); // или $(this).data('pop')
$('.pop-' + popName).addClass('active') // что подразумевает в цсс-файле .data-pop.active {display: block}
});
.main-color:hover .item img {
transition: opacity .3s ease;
}
.main-color:hover .item img.item__img-color {
opacity: 0;
}
/* item, который должен оставаться цветным получает класс active */
.main-color:hover .item img.item__img-color:hover,
.main-color:hover .item.active img.item__img-color {
opacity: 1;
}
target-area
и применим такой скрит:$(document).on('mouseover mousemove', function (e) {
if ($(e.target).hasClass('target-area')) {
// делаем что-то, если курсор в заданной области
} else {
// делаем что-то, если курсор вне заданной области
}
});
$(document).on('mouseover mousemove', function (e) {
if ($(e.target).hasClass('target-area') || $(e.target).parents('.target-area').length) {
// делаем что-то, если курсор в заданной области
} else {
// делаем что-то, если курсор вне заданной области
}
});
$(window).on('scroll', function() {
var winScroll = $(window).scrollTop(),
topMargin = 101,
$resultBlock = $('.result');
$('.element.name').each(function() {
var $elemName = $(this),
elemOffset = $elemName.offset().top,
elemText = $elemName.html();
if(elemOffset > winScroll + topMargin) {
$resultBlock.html(elemText);
}
});
});