Jump to content
Fórum Script Brasil
  • 0

animate não para mesmo com velocidade igual a zero


Question

Tenho o slide abaixo que estou fazendo com Jquery, css e html e animate.

O PROBLEMA:

Quando, no Javascript, o script entrar no bloco abaixo

if (  $(slidesHolder).position().left <= -tamanhoUl )

A animação devera NÃO existir e a transição correr de forma abrupta, instantânea.

No então, mesmo fazendo a velocidade igual a 0 o efeito ainda ocorre!

Pergunta: O que não está certo?

CSS:

* {
	border:0;
	padding: 0;
	margin: 0;
	outline: 0;	
	box-sizing: border-box;
}
body {
	display:flex;
	width: 1040px;	
	margin: 0 auto;
	justify-content: center;
}
.no-transition {
	transition: none !important;
}
.slider > * {	
	border:0;
	padding: 0;
	margin: 0;
	outline: 0;	
	box-sizing: border-box;
}
.slider {
   position: relative;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 130px;
   border: 0;   
}
.slider > #slides {
   position: relative;
   display: flex;
  /* overflow: hidden; */
}
.slider > #slides > #slidesHolder {
   position: relative;
   display: flex;
   transition: all 1s ease;
}
.slider > #slides > #slidesHolder > ul {
   position: relative;
   display: flex;
   list-style: none;
}
.slider > #slides > #slidesHolder > ul > li {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 200px;
   height: 100px;
}
.slider > #slides > #slidesHolder > ul > li > a {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
}
.slider > #slides > #slidesHolder > ul > li > a > img {
	height: 100%;
}
.slider > #title {
	position: absolute;
    align-items: center;
    justify-content: center;
	display: none;
	width: 100px;
	height: 30px;
	top: 50px;
	right: calc(50% - 25px);
	background: #999;
	border: 1px solid #ccc;
}
.slider > #controles {
   display: flex;
   align-items: center;
   justify-content: center;	
   width: 100%;
   height: 30px;
}

.slider > #controles  > button {
   display: flex;
   align-items: center;
   justify-content: center;		
   width: 30px;
   height: 30px;
   cursor: pointer;
   margin: auto 5px;
   border-radius: 50%;
   opacity: .2;
}

.slider > #controles  > button:hover {
   opacity: 1;
   border: 1x solid #ccc;
}

HTML:

<div class="slider">

	<div id="slides">

		<div id="slidesHolder">

			<ul>

				<li><a href=''><img src='img/sites/ctemcasb.png'></a></li>

				<li><a href=''><img src='img/sites/fielcard.png'></a></li>

				<li><a href=''><img src='img/sites/funerariasaopedro.png'></a></li>

				<li><a href=''><img src='img/sites/gasmuriae.png'></a></li>

				<li><a href=''><img src='img/sites/hotplateprensas.png'></a></li>

				<li><a href=''><img src='img/sites/mariasvaidosas.png'></a></li>

			</ul>
			
		</div>
	
	</div>
	
	<span id="title">Pausado</span>
	
	<div id="controles">

		<button id="back"> < </button>
		<button id="next"> > </button>
		
	</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Javascript

$(document).ready( function() {

	//cria as variáveis modificáveis;
	var numeroSlidesMostra =   4,
		tempoIntervalo     =   2000,
		caminho            =   0;
		
	//cria as variáveis NÃO modificáveis;
	var container          =   $("div.slider"),
		slides             =   $(container).find("#slides"),
		slidesHolder       =   $(slides).find("#slidesHolder"),
		slide              =   $(slidesHolder).find("ul"),
		lis                =   $(slide).find("li"),
		tamanhoLi          =   $(lis).first().outerWidth(),
		numeroSlides       =   $(lis).length,
		tamanhoUl          =   tamanhoLi * numeroSlides,
		slideClone         =   $(slide).clone(),
		controles          =   $(container).find("div#controles"),
		span               =   $(container).find("span#title"),
		btnVoltar          =   controles.find("button#back"),
		btnAvancar         =   controles.find("button#next");

	//determina a largura da div que abrigará as UL's.
	$(slides).width(numeroSlidesMostra * tamanhoLi);
	//determina a largura de cada UL partindo do produto entre a largura de cada LI e a quantidade de LI's
	$(slide).width(tamanhoUl);
	//determina a largura de cada UL clone partindo do produto entre a largura de cada LI e a quantidade de LI's
	$(slideClone).width(tamanhoUl);
	//cria uma cópia antes
	$(slideClone).clone().prependTo($(slidesHolder));
	//cria uma cópia depois
	$(slideClone).clone().appendTo($(slidesHolder));
	
	function avancar () {	
		
		if (  $(slidesHolder).position().left <= -tamanhoUl )
			$(slidesHolder).animate({
				"left" : 0
			}, 0);		
		else
			$(slidesHolder).animate({
				"left" : "-=" + tamanhoLi
			}, 1000);			
		
	}


	function voltar () {
		
		if (  $(slidesHolder).position().left >= tamanhoUl )	
			$(slidesHolder).animate({
				"left" : tamanhoUl
			}, 0);
		else
			$(slidesHolder).animate({
				"left" : "+=" + tamanhoLi
			}, 1000);	
		
	}
	
	//código do onClick no botão avançar	
	btnAvancar.click ( function () {

		avancar();		
		
	});
	
	//código do onClick no botão voltar
	btnVoltar.click ( function () {

		voltar();		
		
	});

	//dispara o loop na função avançar
	var loop = setInterval( avancar, tempoIntervalo);		

	//para e reinicia o loop ao passar/retirar o mouse sobre o slide
	slides.mouseover(function(){
		clearInterval(loop);
		//mostra a mensagem 
		span.css('display', 'flex');
	}).mouseout(function(){
		loop = setInterval( avancar, tempoIntervalo);	
		//esconde a mensagem 
		span.css('display', 'none');
	});
	
})

 

Edited by Carlos Rocha
Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      148682
    • Total Posts
      644511
×
×
  • Create New...