I am confused about the pauses and the seemingly erratic behaviour of the animations. The pauses are way longer than 2000ms and the animation jumps way farther then I want it to.
function myFunction() {
myVar = setInterval(slideit, 2000);
}
I want to run a sequence of animations every 2 seconds (or 6 seconds rather, but for testing I'll go with 2) but the result seems kind of weird.
What am I doing wrong?
I am aware that I do not need callbacks for animations but the whole thing went out of sync when the window was minimized then, so I hoped that using callbacks could prevent that.
var myVar;
var countit;
countit = 1;
function myFunction() {
myVar = setInterval(slideit, 2000);
}
function slideit() {
$(".bannertext").animate({ // Text out
opacity: 0,
"left": "-200px"
}, 500, function() {
$(".imgcontainer").animate({ // Next Image
"top": -($(".imgcontainer").height() * countit)
}, 500, function() {
$(".bannertext").animate({ // Text in
opacity: 1,
"left": "-20px"
}, 500);
});
});
countit = countit + 1;
if (countit == $(".imgcontainer").length) {
countit = 1;
}
}
myFunction();
#banner {
background: url(img/rauch-klein.jpg);
overflow: hidden;
height: 350px;
background-size: cover;
}
#subbanner {
width: 800px;
margin: 0 auto;
}
#banner .imgcontainer {
position: relative;
text-align: left;
height: 350px;
}
#banner img {
height: 100%;
vertical-align: middle;
position: absolute;
left: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="banner">
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugarm 150mm</div>
<img src="img/units/absaugarm.png" style="vertical-align:middle;">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugarm 200mm</div>
<img src="img/units/absaugarm-200mm.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugkran</div>
<img src="img/units/absaugkran.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">Absaugtisch</div>
<img src="img/units/absaugtisch.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">AIRTECH P10</div>
<img src="img/units/Airtech_P10.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">AIRTECH P30</div>
<img src="img/units/Airtech_P30.png">
</div>
</div>
<div id="subbanner">
<div class="imgcontainer">
<div class="bannertext">BlowTec</div>
<img src="img/units/BlowTec.png">
</div>
</div>
From the Jquery docs:
If multiple elements are animated, the callback is executed once per
matched element, not once for the animation as a whole
That means the complete function is called for each bannertext class element. If you don't want to fadeout only specific elements, the quickest solution is referring to this inside the callback function.
function slideit() {
var cnt = countit;
$(".bannertext").animate({ // Text out
opacity: 0,
"left": "-200px"
}, 500, function() {
$(this).parent().animate({ // Next Image
"top": -($(".imgcontainer").height() * cnt)
}, 500, function() {
$(this).children(".bannertext").animate({ // Text in
opacity: 1,
"left": "-20px"
}, 500);
});
});
countit = countit + 1;
if (countit == $(".imgcontainer").length) {
countit = 1;
}
}
jsfiddle example.
(Another side effect was that countit was increased right away. In normal execution it would have been increased before the first complete callback was executed. That's why a temp variable cnt is used as well)
Related
This is what I've tried so far, but it just shows all the elements at once:
i1 = document.getElementById('img_1');
i2 = document.getElementById('img_2');
i3 = document.getElementById('img_3');
i4 = document.getElementById('img_4');
i5 = document.getElementById('img_5');
myarr = [i1,i2,i3,i4,i5];
for (i=0; i<myarr.length;i++) {
$(myarr[i]).show().delay(5000).fadeOut();
}
I assume you are trying to achieve an endless loop.
I think you should use interval in that case, and do fadeOut/fadeIn of elements.
i1 = document.getElementById('img_1');
i2 = document.getElementById('img_2');
i3 = document.getElementById('img_3');
i4 = document.getElementById('img_4');
i5 = document.getElementById('img_5');
let myarr = [i1, i2, i3, i4, i5];
let active = 1;
setInterval(() => {
$(myarr[active - 1]).fadeOut(500)
if (active >= myarr.length) {
active = 0
}
setTimeout(() => {
$(myarr[active]).fadeIn(500);
active = active + 1;
}, 500)
}, 5000)
What this does, is updates elements every 5 sec to next element, if it reached the end, it resets it to zero.
Checkout this fiddle
You can use async and await.
Another this you can improve is that. You can add same class to all images you want to show in series. If you want to select all by id you can use Attribute Selectors.
const myarr = document.querySelectorAll('img[id^=img]');
I have used same class rather than id
const arr = [...document.querySelectorAll('.test')];
(async function(){
for (let i=0; i<arr.length;i++) {
await new Promise(res => {
setTimeout(() => {
$(arr[i]).show().fadeOut();
res();
},2000)
})
}
})()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">Test 1</div>
<div class="test">Test 2</div>
<div class="test">Test 3</div>
let count = 1;
setInterval(()=>{
document.querySelectorAll("*[id*='img_']").forEach((elem)=> elem.style.display="none");
document.getElementById(`img_${count}`).style.display="";
if(count<4) count++;
else count = 1;
},1000)
<div id="img_1">Image 1</div>
<div id="img_2" style="display:none">Image 2</div>
<div id="img_3" style="display:none">Image 3</div>
<div id="img_4" style="display:none">Image 4</div>
Vanilla Javascript solution!
You forgot to show your element after fadeOut. Here you can achieve it:
// show first element
$('img').eq(0).show();
$('img').each(function () {
// your delay
$('img').delay(5000).fadeOut();
// make sure next element is image
if ($(this).next()[0].tagName === 'IMG') {
// show next element
$(this).next().fadeIn();
}
});
img {
display: none;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://picsum.photos/id/5/50" />
<img src="https://picsum.photos/id/10/50" />
<img src="https://picsum.photos/id/30/50" />
<img src="https://picsum.photos/id/0/50" />
<img src="https://picsum.photos/id/150/50" />
<img src="https://picsum.photos/id/1000/50" />
var basicVal =0;
$(document).ready(function(){
$('.wrapper img').eq( basicVal ).show();
var setTime =setInterval(function(){
if( basicVal < $('.wrapper img').length - 1){
$('.wrapper img').eq(basicVal ).hide();
basicVal++;
$('.wrapper img').eq(basicVal).show();
}else{
clearTimeout(setTime);
}
console.log();
}, 5000);
});
.wrapper{
width: 100%;
float: left;
}
.wrapper img{
width: 50%;
height: 300px;
object-fit: cover;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<img src="https://images.pexels.com/photos/34950/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
<img src="http://www.desktopwallpaperhd.net/wallpapers/0/4/landscapes-wallpaper-fengguangbizhi-fengjingbizhi-picture-image-1316.jpg" alt="">
<img src="http://trustbanksuriname.com/wp-content/uploads/2019/04/pony-picture-guide-to-native-pony-breeds-little-pony-cartoon-pictures.jpg" alt="">
<img src="https://www.bigfoto.com/stones-background.jpg" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQulscf1nNOpaI1tElZgKTTSAl_ZcL_i1VwLDojgKzqjSTMofsqPw" alt="">
</div>
check this out I use some little bit of jquery and setInterval function to change in every 5000ms
You may use setTimeout for achieving this effect.
<div id="container">
<div class="block" id="img_1"></div>
<div class="block" id="img_2"></div>
<div class="block" id="img_3"></div>
<div class="block" id="img_4"></div>
<div class="block" id="img_5"></div>
</div>
.block{
width:100px;
height:100px;
display: inline-block;
margin:10px;
background: lightblue;
visibility: hidden;
}
And then,
$('.block').each(function(index, value) {
setTimeout(function() {
$(value).css("visibility", "visible");
$(value).show().delay(1000).fadeOut();
}, 2000 * (index + 1));
});
i have created image animation with 3 image in which , initially only 1 image displayed then after animation of 1st image complete then same with second at a time only two image i have to display and if 3rd image come then i have to hide first image , i want this type of animation for all 6 images but i am stuck after 4th image , help me to resolve this or suggest me any other js that can make my work done.many thanks.
here is my fiddle : js fiddle
Following is code :
HTML
<div style="float:left;position: relative;left: 300px" id="b">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_chart_track_number_one-128.png" class="image1">
</div>
<div style="float:left;position: relative;display: none;" id="b1">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/track_number_two_circle-128.png" class="image2">
</div>
<div style="float:left;position: relative;display: none;" id="b2">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/three_top_chart_track-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b3">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_number_four_track_chart_circle-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b4">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_five_chart_track_list-128.png" class="image3">
</div>
<div style="float:left;position: relative;display: none;" id="b5">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/number_six_circle_chart_list_track-128.png" class="image3">
</div>
JS
$(document).ready(function() {
$("#b").animate({left: "-=300"},2000);
$("#b").animate({left: "+=80"}, 1000);
var counter = 1;
setInterval(function()
{
++counter;
console.log(counter);
if(counter=='2')
{
}
else if(counter=='7')
{
$("#b").animate({left: "-=80"},1000);
}
else if(counter=='4')
{
$("#b1").fadeIn('slow');
$("#b1").animate({left: "+=300"},2000);
$("#b1").animate({left: "-=280"}, 1000);
}
else if(counter=='8')
{
console.log('enter');
$("#b2").fadeIn('slow');
$("#b2").animate({left: "+=300"},2000);
$("#b2").animate({left: "-=500"}, 1000);
}
else if(counter=='11')
{
console.log('enter');
$("#b").animate({left: "-=300"}, 1000);
$("#b1").animate({left: "-=260"}, 1000);
$("#b2").animate({left: "-=0"}, 1000);
//$("#b").hide('1000');
}
}, 1000); });
Seems like a pain to add all that animation code for each element, especially if you decide to add more in the future. How about having a recursive function like this:
$(document).ready(function () {
var $first = $('.number').first();
slider($first, true);
function slider($first, firstPass) {
var $second = $first.next();
var $third = $second.next();
if (firstPass) {
$first.fadeIn('slow');
$first.animate({ left: "0" }, 2000, function () {
$first.animate({ left: "80px" }, 1000, function () {
loop();
});
});
} else {
loop();
}
function loop() {
$second.css('left', '120px').fadeIn('slow');
$second.animate({ left: "400px" }, 2000, function () {
$first.delay(500).animate({ left: "0" }, 1000);
$second.animate({ left: "150px" }, 1000, function () {
// If there is no third element, we can stop here.
if ($third.length > 0) {
$third.css('left', '250px').fadeIn('slow');
$first.delay(2500).animate({ left: "-600px" }, 1000, function () {
$first.fadeOut();
});
$second.delay(3000).animate({ left: "-300px" }, 1000, function () {
$second.fadeOut();
});
$third.animate({ left: "550px" }, 2000, function () {
$third.animate({ left: "80px" }, 1000, function () {
// Start again and set the third element as the new first.
slider($third, false);
});
});
}
});
});
}
}
});
.number {
position: absolute;
display: none;
}
#b {
left: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="number" id="b">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_chart_track_number_one-128.png" class="image1">
</div>
<div class="number" id="b1">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/track_number_two_circle-128.png" class="image2">
</div>
<div class="number" id="b2">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/three_top_chart_track-128.png" class="image3">
</div>
<div class="number" id="b3">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_number_four_track_chart_circle-128.png" class="image3">
</div>
<div class="number" id="b4">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/top_five_chart_track_list-128.png" class="image3">
</div>
<div class="number" id="b5">
<img src="https://cdn4.iconfinder.com/data/icons/online-menu/64/number_six_circle_chart_list_track-128.png" class="image3">
</div>
I see that the code only handles first three circles (seconds 1-11).
Further animation is provided by adding cases for later seconds.
Here is the fiddle that adds one case to show you that circle "4" is indeed displayed. But I believe it is upto you to make the final solution of it.
relevant code section is:
else if (counter == '14') {
console.log('enter 14');
$("#b3").fadeIn('slow');
$("#b").animate({
left: "0"
}, 1000);
$("#b1").animate({
left: "30"
}, 1000);
$("#b2").animate({
left: "60"
}, 1000);
$("#b3").animate({
left: "200"
}, 1000);
//$("#b").hide('1000');
}
I know this has been asked many times before, and I tried to look at the answers and follow them. But I just can't seem to figure out how to apply those answers with my specific code and now i'm stuck. If anyone could look over it and help me it would be very appreciated.
Simply, I just want to make an autoplay feature that plays those 6 images and can also play and pause. Ideally with one button. That's all.
[JSfiddle link. Though it has no pictures. Maybe it helps?][1]
window.onload = function() {
function show1() {
document.getElementById("showingImage").src = "images/.jpg";
}
function show2() {
document.getElementById("showingImage").src = "images/2.jpg";
}
function show3() {
document.getElementById("showingImage").src = "images/3.jpg";
}
function show4() {
document.getElementById("showingImage").src = "images/4.jpg";
}
function show5() {
document.getElementById("showingImage").src = "images/5.jpg";
}
function show6() {
document.getElementById("showingImage").src = "images/6.jpg";
}
var one = document.getElementById("one");
one.onmouseover = show1;
var two = document.getElementById("two");
two.onmouseover = show2;
var three = document.getElementById("three");
three.onmouseover = show3;
var four = document.getElementById("four");
four.onmouseover = show4;
var five = document.getElementById("five");
five.onmouseover = show5;
var six = document.getElementById("six");
six.onmouseover = show6;
}
#container {
width: 800px;
margin: 0 auto;
background-color: red;
}
#showingImage {
width: 800px;
height: 400px;
}
#thumbnail {
max-height: 50px;
margin: 10 auto 10 10;
text-align: center;
}
HTML:
<body>
<div id="container">
<div>
<img id="showingImage" src="images/1.jpg">
</div>
<div id="thumbnail">
<span id="one"><img id="thumbnail" src="images/1.jpg"></span>
<span id="two"><img id="thumbnail" src="images/2.jpg"></span>
<span id="three"><img id="thumbnail" src="images/3.jpg"></span>
<span id="four"><img id="thumbnail" src="images/4.jpg"></span>
<span id="five"><img id="thumbnail" src="images/5.jpg"></span>
<span id="six"><img id="thumbnail" src="images/6.jpg"></span>
</div>
</div>
</body>
Bonus points if you could explain how apply the Jquery fadeIn to the mouseover part and the autoplay.
Here you go. I refactored the show and mouseover functions into a single function apiece; the show() function uses jQuery's fadeIn and fadeOut effects. The button starts and stops the slideshow. I also changed your CSS a bit so that the images have unique ids and thumbnail is a class.
window.onload = function() {
var playing;
var currentImage = 1;
// show an image with 200ms fade in/out effects
function show(img) {
$("#showingImage").fadeOut(200, function() {
$("#showingImage").attr("src", "https://dl.dropboxusercontent.com/u/76726218/images/" + img + ".jpg").fadeIn(200);
});
}
// initialze the mouseover
$("img.thumbnail").mouseover(function() {
console.log($(this));
show($(this).attr("id"));
});
// start autoplay with 1s per image
function play() {
if (!playing) {
playing = setInterval(function() {
show(currentImage + 1);
currentImage++;
currentImage %= 6;
}, 1000);
}
}
// pause autoplay
function pause() {
clearInterval(playing);
playing = false;
}
// set up the button to toggle between play & pause
$("#playPauseButton").click(function(e) {
if (playing) {
pause();
$("#playPauseButton").html("Play");
} else {
play();
$("#playPauseButton").html("Pause");
}
});
// start autoplay
play();
}
#container {
width: 800px;
margin: 0 auto;
background-color: red;
text-align: center;
}
#showingImage {
width: 800px;
height: 400px;
}
.thumbnail {
max-height: 50px;
margin: 10 auto 10 10;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>
<img id="showingImage" src="https://dl.dropboxusercontent.com/u/76726218/images/1.jpg">
</div>
<div class="thumbnail">
<span><img id="1" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/1.jpg"></span>
<span><img id="2" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/2.jpg"></span>
<span><img id="3" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/3.jpg"></span>
<span><img id="4" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/4.jpg"></span>
<span><img id="5" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/5.jpg"></span>
<span><img id="6" class="thumbnail" src="https://dl.dropboxusercontent.com/u/76726218/images/6.jpg"></span>
</div>
<button id="playPauseButton">Pause</button>
</div>
I'm looking to achieve something like this demo here, but for each element of a class, it will stop scrolling and drag the next div up from the bottom. This could be a similar thing to a printer printing paper. I'm not sure how it will fully work for the JS side but what I have is below. I'm close, but it doesn't like doing more than 2 elements. Adding the support for the extra elements would be amazing because then this could be released as a library to achieve the effect.
If the below snippet doesn't look like it works quite right view it here on codepen.
$(document).ready(function() {
$('.container:first-child').css('position', 'relative');
});
$(window).scroll(function() {
$('.container').each(function(i) {
var winheight = $(window).scrollTop() + $(window).height();
var distToTop = $(this).position().top + $(this).height();
var dist = distToTop - winheight;
if ((dist) <= 0) {
$(this).css('position', 'fixed').css('top', ($(this).children().height() - $(window).height()) / (-2) + 'px');
} else if (dist == $(this).height()) {
$(this).css('position', 'relative').css('top', $(window).height() + 'px').css('z-index','1');
}
console.log(dist + ' ' + i);
});
});
body {
margin: 0;
padding: 0;
}
.container {
position: fixed;
top: 100%;
}
.container:first-child {
background: tan;
width: 100%;
height: 100%;
}
.container:nth-child(2) {
background: blue;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='big'>
<div class='container'>
<div class='t'>
<img src='http://placehold.it/500x250'>
<img src='http://placehold.it/500x250'>
</div>
</div>
<div class='container'>
<div class='t2'>
<img src='http://placehold.it/500x250/fff'>
<img src='http://placehold.it/500x250/fff'>
</div>
</div>
<div class='container'>
<div class='t'>
<img src='http://placehold.it/500x250'>
<img src='http://placehold.it/500x250'>
</div>
</div>
<div class='container'>
<div class='t2'>
<img src='http://placehold.it/500x250/fff'>
<img src='http://placehold.it/500x250/fff'>
</div>
</div>
</div>
The Demo on this site is currently a little wonky because of the difference in windows sizes.
I have this banner ticker which works as you first load the page, but it gets messed up as you resize the second time and my assumption is that I am not calling the function in the right way on the resize event, any advice so I can understand what is going on?
jsfiddle
html
<div class="">
<div class="topBanners" style="float: left; width: 200px; ">
<p>First one</p>
</div>
<div class="topBanners" style="float: left; width: 200px; ">
<p>Second</p>
</div>
<div class="topBanners" style="float: left; width: 200px; ">
<p>Third</p>
</div>
</div>
js
$(document).ready(function() {
currentTopBanner = 0;
var topBanners = $('.topBanners');
console.log(topBanners.length);
function rotateTopBanners() {
if ($(window).width() < 768) {
topBanners.hide();
$(topBanners[currentTopBanner]).fadeIn('slow').delay(100).fadeOut('slow');
$(topBanners[currentTopBanner]).queue(function () {
currentTopBanner = currentTopBanner < topBanners.length - 1 ? currentTopBanner + 1 : 0;
rotateTopBanners();
$(this).dequeue();
});
} else {
topBanners.show();
}
}
rotateTopBanners();
$(window).resize(function () {
rotateTopBanners();
});
});