0
I was wondering how I do to put a delay on image exchanges using jQuery.
I did a test and it’s not working, follow the code below.
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').delay(2000).animate({ scrollTop: $($(this).attr('href')).offset().top}, 0, 'linear');
});
});.item {
width: 400px;
height: 200px;
border: 1px solid #fff;
overflow: hidden;
text-align: center;
}
.item a {
width: 30px;
height: 30px;
background: #f30;
overflow: hidden;
}
#left {
float: right;
text-align: center;
color: white;
text-decoration: none;
margin-top: 80px;
}
#right {
float: left;
text-align: center;
color: white;
text-decoration: none;
margin-top: 80px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="item">
<img src="1.png" id="1" class="t1">
<a href="#2" id="left"> » </a>
<a href="#4" id="right"> « </a>
<img src="2.png" id="2" class="t2">
<a href="#3" id="left"> » </a>
<a href="#1" id="right"> « </a>
<img src="3.png" id="3" class="t3">
<a href="#4" id="left"> » </a>
<a href="#2" id="right"> « </a>
<img src="4.png" id="4" class="t4">
<a href="#1" id="left"> » </a>
<a href="#3" id="right"> « </a>
</div>
In the context of your question you aim to add an image exchange delay, but in your jQuery code you appear to be trying to manipulate the navigation position scroll of
body/html. Could you give us more information and clarify in the question what you really want to do?– Chun
the sorry I didn’t see this detail, I really wanted to is by a delay with jquery when changing image to another only the btns is link so it moves on time, I want to put a delay so it doesn’t move dry.
– Andre Junior