#javascript #jquery #html #css #plugins
#javascript #jquery #HTML #css #Плагины
Вопрос:
Я создаю плагин carousel jQuery, но не могу понять, почему левая и правая кнопки работают только через пару секунд … если вы попытаетесь щелкнуть одну из них сразу, эффект затухания вызовет нежелательную задержку, но если вы сначала немного подождете, а затем нажмете, он сразу исчезнет, кактак и должно быть. Я попытался удалить интервал, и это не помогло. Пожалуйста, запустите фрагмент кода ниже, чтобы понять, что я имею в виду. Действительно странная часть заключается в том, что если вы измените эффект с «fade» на «split», эффект произойдет сразу при нажатии кнопки.
(function ($) {
/* jSlide */
$.fn.jSlide = function( options ) {
var settings = $.extend({
buttons: true,
speed: 3000,
effect: "slide",
sizing: "auto",
fadeSpeed: 1000
}, options );
//Main wrapper
var styles = {
'position': 'relative',
'overflow': 'hidden'
};
$(this).css( styles );
//Anchors amp; Sizing
this.children().each( function () {
//Sizing
if ( settings.sizing == "auto" ) {
var styles = {
'position': 'absolute',
'width': 'auto',
'height': 'auto',
'min-width': '100%',
'min-height': '100%'
}
$(this).css( styles );
} else if ( settings.sizing == "fullWidth" ) {
var styles = {
'position': 'absolute',
'width': '100%',
'height': 'auto'
}
if ( settings.effect == "split" ) {
styles.width = '200%';
}
$(this).css( styles );
} else if ( settings.sizing == "fullHeight" ) {
var styles = {
'position': 'absolute',
'width': 'auto',
'height': '100%',
}
$(this).css( styles );
}
//Anchors
if ( settings.effect == "split" ) {
$(this).wrap('<div class="j-slide-wrapper"></div>').wrap('<div class="j-split-anchor"></div>');
$(this).clone().appendTo($(this).closest('.j-slide-wrapper')).wrap('<div class="j-split-anchor"></div>');
} else {
$(this).wrap('<div class="j-slide-wrapper"></div>');
}
var length = $('.j-slide-wrapper').length;
$('.j-slide-wrapper').each( function (index) {
$(this).css('z-index', length - index)
}).promise().done(function () {
$('.j-slide-wrapper').each( function () {
$(this).animate({
'opacity': 1
}, 1000)
});
});
});
//Buttons
if ( settings.buttons ) {
this.prepend(
'<button id="j-slide-left-btn" class="j-slide-btn styled-button"></button>'
'<button id="j-slide-right-btn" class="j-slide-btn styled-button"></button>'
)
}
var length = $('.j-slide-wrapper').length;
$('.j-slide-btn').css('z-index', length 1);
//Effect
var i = 0,
wrapper = $(this).find('.j-slide-wrapper');
timer = setInterval( function () {
var length = wrapper.length;
if (settings.effect == "fade") {
fadeSlides(i, wrapper, length, 'right', settings.fadeSpeed);
} else if ( settings.effect == "split" ) {
splitSlides(i, wrapper, length, 'right');
}
if (i 1 == length) {
i = 0;
} else {
i = i 1;
}
}, settings.speed);
$('#j-slide-left-btn').click( function() {
clearInterval(timer);
var length = wrapper.length;
if ( settings.effect == "fade" ) {
fadeSlides(i, wrapper, length, 'left', settings.fadeSpeed);
} else if (settings.effect == "split") {
splitSlides(i, wrapper, length, 'left');
}
if (i - 1 < 0) {
i = length - 1;
} else {
i = i - 1;
}
});
$('#j-slide-right-btn').click( function() {
clearInterval(timer);
var length = wrapper.length;
if ( settings.effect == "fade") {
fadeSlides(i, wrapper, length, 'right', settings.fadeSpeed);
} else if (settings.effect == "split") {
splitSlides(i, wrapper, length, 'right');
}
if (i 1 == length) {
i = 0;
} else {
i = i 1;
}
});
function fadeSlides (i, wrapper, length, dir, speed) {
wrapper.eq(i).css('z-index', 3);
wrapper.filter(':gt(' i ')').css('z-index', 1);
wrapper.filter(':lt(' i ')').css('z-index', 1);
if ( dir == 'right') {
if ( i 1 == length) {
wrapper.eq(0).css('z-index', 2);
wrapper.eq(0).fadeTo(1, 1);
} else {
wrapper.eq(i 1).css('z-index', 2);
wrapper.eq(i 1).fadeTo(1, 1);
}
} else {
if ( i - 1 < 0) {
wrapper.eq(length - 1).css('z-index', 2);
wrapper.eq(length - 1).fadeTo(1, 1)
} else {
wrapper.eq(i - 1).css('z-index', 2);
wrapper.eq(i - 1).fadeTo(1, 1)
}
}
wrapper.eq(i).fadeTo(speed, 0, function() {
$(this).css('z-index', 1);
});
}
function splitSlides (i, wrapper, length, dir) {
wrapper.eq(i).css('z-index', 2);
if ( dir == 'right') {
if ( i 1 == length) {
wrapper.eq(0).css('z-index', 1);
wrapper.eq(0).find('.j-split-anchor').each( function () {
$(this).animate({
left: 0
}, 0);
});
} else {
wrapper.eq(i 1).css('z-index', 1);
wrapper.eq(i 1).find('.j-split-anchor').each( function () {
$(this).animate({
left: 0
}, 0);
});
}
} else {
if ( i - 1 < 0) {
wrapper.eq(length - 1).css('z-index', 1);
wrapper.eq(length - 1).find('.j-split-anchor').each( function () {
$(this).animate({
left: 0
}, 0);
});
} else {
wrapper.eq(i - 1).css('z-index', 1);
wrapper.eq(i - 1).find('.j-split-anchor').each( function () {
$(this).animate({
left: 0
}, 0);
});
}
}
wrapper.eq(i).find('.j-split-anchor:first-child').animate({
'left': '-100%'
}, 750);
wrapper.eq(i).find('.j-split-anchor:last-child').animate({
'left': '100%'
}, 750);
}
return this;
}
} (jQuery));
$(window).on("load", function () {
$('#split-images').jSlide({
effect: "fade",
sizing: "auto",
speed: 3000,
});
}); body, html{
height: 100%;
width: 100%;
overflow-x: hidden;
padding: 0;
margin: 0;
}
#split-images{
display: block;
width: 100%;
height: 100%;
}
.j-slide-wrapper{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
/* .j-slide-wrapper::before{
display: table;
table-layout: fixed;
content: "";
}
.j-slide-wrapper::after{
display: table;
table-layout: fixed;
content: "";
clear: both;
} */
.j-split-anchor {
width: 50%;
height: 100%;
float: left;
position: relative;
overflow: hidden;
}
.j-slide-wrapper:nth-of-type(n 2) .j-split-anchor:first-child{
left: -100%;
}
.j-slide-wrapper:nth-of-type(n 2) .j-split-anchor:last-child{
left: 100%;
}
.j-split-anchor:first-child img{
right: 0;
-ms-transform: translateX(50%);
-moz-transform: translateX(50%);
-o-transform: translateX(50%);
-webkit-transform:translateX(50%);
transform: translateX(50%);
}
.j-split-anchor:last-child img{
left: 0;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-webkit-transform:translateX(-50%);
transform: translateX(-50%);
}
/* ************************************** BUTTONS ************************** */
.j-slide-btn{
position: absolute;
height: 25px;
width: 25px;
top: 50%;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform:translateY(-50%);
transform: translateY(-50%);
z-index: 3;
opacity: 0.7;
}
#j-slide-left-btn{
background: #3f3a3e url(../images/arrow-left-light.png) center center no-repeat;
left: 2%;
}
#j-slide-right-btn{
background: #3f3a3e url(../images/arrow-right-light.png) center center no-repeat;
right: 2%;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="split-images">
<img src="https://pixabay.com/static/uploads/photo/2015/03/25/06/48/love-688582_960_720.jpg" alt= "" />
<img src="https://prod01-cdn04.cdn.firstlook.org/wp-uploads/sites/1/2016/04/GoogleWH-lead-FIN-article-header.jpg" alt= "" />
<img src="https://lh4.googleusercontent.com/KRvgImt_ugjuflC9uMurL5Dln3PTeofLN9xQtHESNs_ehRbFDezNrD9IkBYmzPqFeZ6tFb_lG08=s640-h400-e365" alt= "" />
</div> Комментарии:
1. Как я вижу здесь, с этим фрагментом… Самый первый щелчок по кнопкам prev или next имеет более длительную задержку затухания… Кроме этого… Похоже, работает.
2. У него вообще не должно быть задержки. Предполагается, что он сразу начнет исчезать, как и остальные клики.
Ответ №1:
Я думаю, что проблема возникает из-за путаницы между speed и fadeSpeed переменными.
speed or setting.speed в основном используется для setTimout задержек (3000 секунд).
Но fadespeed (1000 мс) используется в качестве аргумента для fadeSlides() функционирования, как определено здесь:
function fadeSlides (i, wrapper, length, dir, speed) {...});
При загрузке вы определяете это:
$(window).on("load", function () {
$('#split-images').jSlide({
effect: "fade",
sizing: "auto",
speed: 3000,
});
});
И когда документ готов, вы расширяете jSlide следующим образом:
(function ($) {
/* jSlide */
$.fn.jSlide = function( options ) {
var settings = $.extend({
buttons: true,
speed: 3000,
effect: "slide",
sizing: "auto",
fadeSpeed: 1000
}, options );
//... More code lines skipped here
}
} (jQuery));
Я не уверен на 100%… Но взгляните на это.
«Более длительная задержка», которую я заметил в поведении фрагмента и о которой я упоминал в комментариях к вашему вопросу, странно выглядит как 3000 мс, а не 1000 мс.
Комментарии:
1. Я только что вынул код из комментария «// Anchors», относящегося к z-индексам, и заметил, что кнопка работает немедленно, однако изображение просто появляется, а не исчезает. Я думаю, это может быть подсказкой
2. Вы правы в этом утверждении … Хью… Я не знаю.
3. Я только что понял это! Проблема заключается здесь .. $(‘.j-slide-wrapper’).each( function (index) { $(this).css(‘z-index’, length — index) }).promise().done(function () { $(‘.j-slide-wrapper’).each( function () { $(this).animate({ ‘непрозрачность’: 1 }, 1000) }); }); Проблема в том, что оболочка слайда уже анимирована, поэтому новая анимация не работает!
4. Опубликуйте свое решение… Меня не волнуют точки. Я думаю, что я помог, так что повышения будет достаточно. Вы можете «ответить сами», используя флажок под текстовой областью ответа. 😉
Ответ №2:
Проблема заключалась в этом фрагменте кода:
$('.j-slide-wrapper').each( function (index) {
$(this).css('z-index', length - index)
}).promise().done(function () {
$('.j-slide-wrapper').each( function () {
$(this).animate({
'opacity': 1
}, 1000)
});
});
Слайды не удалось анимировать снова, потому что они уже находились в процессе анимации! Чтобы исправить это, я сократил время анимации с 1000 до 1. В конце концов, я хотел бы получить лучшее решение — исчезнуть во всей карусели после загрузки всех ее изображений, но пока этого будет достаточно.