i am trying to creat a carousel animation that take 3 pics and slide the to the left and bring new 3 images, i don't think i'm in the right direction need help
here is the fiddle link: http://jsfiddle.net/G5cKK/11/
setInterval(function () {
$('img:first').animate({
'left': -$('.box').width() + 'px'
},1000, function () {
$(this).remove().appendTo('.all')
});
}, 5000);
You can animate width instead of position:
JavaScript
setInterval(function() {
var $img = $('img:first');
var $imgClone = $img.clone().width(0).appendTo('.all');
$img.animate({'width': 0},1000, function(){$img.remove()});
$imgClone.animate({'width': 65},1000);
}, 5000)
Demo: http://jsfiddle.net/G5cKK/12/
Related
Hi i'm building a javascript slider for my portfolio with Javascript. The slides work properly but when i add a fading transition i keep getting a white flash between the 2 slides. Anyone knows how to create a smooth fade between them?
I added a JSfiddle down below.
Here's my javascript:
$(function () {
var theInterval; // Slide speed
var images = new Array();
var counter = 1;
var defaultSettings = {
"sliderContainer": "#slider" // SliderContainer
, "pauseWithMouse": true // Turn on/off pause with mouse
, "sliderSpeed": 3000 // Slide speed
, "transitionSpeed": 200 // transition speed
};
// intialize slider
// if myImages exists then
images = myImages;
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImg" width="900" src="' + images[0] + '" />');
startSlide(images);
}
function cycleImages(images) {
if (counter >= images.length) {
counter = 0;
}
console.log(counter);
document.getElementById("sliderImg").src = images[counter];
counter++;
var images = $('#sliderImg')
var now = images.filter(':visible')
var next = now.next().length ? now.next() : images.first()
var speed = defaultSettings.transitionSpeed; //Transition speed
now.fadeOut(speed);
next.fadeIn(speed);
}
function startSlide() {
console.log('start');
theInterval = setInterval(function () {
cycleImages(images);
}, defaultSettings.sliderSpeed);
// Set interval time
};
var stopSlide = function () { // Stop slides on hover
console.log('stop');
if (defaultSettings.pauseWithMouse) {
clearInterval(theInterval);
}
};
$('#sliderImg').on('mouseover', function () { // Stop slides on mouseover
stopSlide();
});
$('#sliderImg').on('mouseout', function () { // Continue with slides on mouseout
startSlide();
});
});
The JS Fiddle Link
This is happening because there is no background while the fade in occurs. The easiest way to fix this is to add a z-index property to the image or the slide.
For example give the first image an z-index of 1 and the second one a z-index of 2
Here is the code that you should implement:
var subs = $(this).find('#sliderImg');
var index = subs.eq(0).css('z-index');
subs.gt(0).each(function() {
$(this).css('z-index', ++index);
});
The idea is to access each element of the array via the tag you provided #sliderImg and using the jQuery method each to increase the z-index css property with 1.
Here is a working fiddle: Working Fiddle
I made div, if i click on it, jquery makes bullet and that element is animated. This is code:
$('.square').click(function() {
$('<div class="bullet"></div>').appendTo($('body')).animate({
'margin-top': 554
}, 2000, function() {
$(this).remove();
});
});
It works properly when I'm not clicking second time on div before animation is done. If i do this, my second "bullet" starts animation from position of first.
How to fix that? Thank's for help :)
UPDATE##
Here's the jsfiddle with problem:
https://jsfiddle.net/2ghj1x45/
it's because the elements all have a size because they aren't positioned absolutely so each bullet div you add has display block, so will get it's own line where it's height is bullet size + margin top , which increases as it's animated. try instead using position absolute so the bullet div doesn't affect the layout of any other div
like so
$(bullet).animate({ top: value });
Why not timeout the click function with a variable:
var animating = false;
$('.square').click(function() {
if(!animating) {
animating = true;
setTimeout(function() {
animating = false;
}, 2000);
$('<div class="bullet"></div>').appendTo($('body')).animate({
'margin-top': 554
}, 2000, function() {
$(this).remove();
});
}
});
EDIT:
Updated JSfiddle
Building a carousel with thumbnails, the thumbnail should correspond with the slide displayed and the selected thumbnail should have a border around it to let users know which slide they are on. My current code just has the thumbnails selected onclick they should be auto updating with each slide of the carousel, what have I done wrong?
$('#myCarousel').carousel({
interval: 4000
});
// handles the carousel thumbnails
$('.carousel-selector').click(function () {
var selectorIdx = $(this).closest('li').index();
$('#myCarousel')
.carousel(selectorIdx)
.find('.carousel-selector').removeClass('selected')
.eq(selectorIdx).addClass('selected')
.end()
.find('.item').removeClass('selected')
.eq(selectorIdx).addClass('active');
});
Fiddle
http://jsfiddle.net/gward90/xr8qzxmg/9/
The best way to go about this is to use the slide.bs.carousel event to change the "active" thumbnail.
$('#myCarousel').carousel({
interval: 4000
});
var selectorIdx = 1;
var numItems = $('.carousel-selector').length;
// handles the carousel thumbnails
$('.carousel-selector').click(function () {
selectorIdx = $(this).closest('li').index();
$('#myCarousel').carousel(selectorIdx)
});
$('#myCarousel').on('slide.bs.carousel', function () {
$('#myCarousel')
.find('.carousel-selector').removeClass('selected')
.eq(selectorIdx).addClass('selected')
.end()
.find('.item').removeClass('selected')
.eq(selectorIdx).addClass('active');
if (selectorIdx < (numItems - 1))
selectorIdx++;
else
selectorIdx = 0;
});
JSFiddle
I am making a gallery with thumbnails. It works but I want to make an image transition, and I want it to fades in. In this case it fades in but only for the first image. The next images show up without any animation.
$('.picture').click(function() {
$("#screen img").attr('src', $(this).attr('src')).animate({
height: "400px"
}, 2000);
});
And also, can someone tell me how to position the image in the div to be centrally placed using the width and the height of the div and the image? I don't want to use plugin for the gallery, so I would appreciate your help very much.
To maintain your current transition try
var $simg = $("#screen img");
$('.picture').click(function () {
var $img = $(this);
if ($simg.height() == 0) {
$("#screen img").attr('src', $(this).attr('src')).animate({
height: "400px"
}, 2000);
} else {
$("#screen img").animate({
height: "0"
}, function () {
$(this).attr('src', $img.attr('src')).animate({
height: "400px"
}, 2000)
});
}
});
Demo: Fiddle, using fade animation
I built this simple accordion style banner. Here's what it's supposed to do:
Grab <li> containing images from selected <ul>.
Divide them equally within the container (div.banner)
On 'mouseenter', add class .active to the hovered <li>
Shrink the other <li>s widths (half their original width).
Enlarge active <li> to new width (remainder after halving the others)
On 'mouseleave', all return to original widths.
Works fine until you swipe over multiple panes quickly. If you do, the last of the floated <li>'s break to the next line. It appears the total width of the panes is exceeding their container.
Rounding error while animating? Does it have something to do with animate's default 'swing' easing?
Fiddle: http://jsfiddle.net/UNFc4/
var banner = $('.banner');
var list_items = banner.find('li');
var banner_width = $(banner).width();
var num_of_images = $(banner).find('li').length;
var original_width = banner_width / num_of_images;
var half_width = (banner_width / num_of_images) / 2;
var init = function () {
$(list_items).css('width', original_width);
$(list_items).on('mouseenter', function () {
$(this).addClass('active');
doAnimation();
});
$(list_items).on('mouseleave', function () {
resetAnimation();
$(this).removeClass('active');
});
}
var doAnimation = function () {
$(list_items).not(".active").stop().animate({
width: half_width + "px"
}, 500);
$(".active").stop().animate({
width: (original_width + (half_width * (num_of_images - 1))) + "px"
}, 500);
}
var resetAnimation = function () {
$(list_items).stop().animate({
width: original_width + "px"
}, 500);
}
init();
I could fix it by changing this line, slowing the animation of the others, giving things time to equal out. But, I'd rather solve what's going on here, hopefully learning a bit more about how jQuery's animate() works.
$(list_items).not(".active").stop().animate({
width: half_width + "px"
}, 480); // changed 500 to 480
For those interested, I realized I only needed the reset on the banner area. Now it works, as described, without all the jitteriness and the subsequent layout mis-alignments.
New Fiddle: http://jsfiddle.net/UNFc4/1/
$(list_items).on('mouseenter', function () {
$(this).addClass('active');
doAnimation();
});
$(list_items).on('mouseleave', function () {
$(this).removeClass('active');
doAnimation();
});
$(banner).on('mouseleave', function () {
resetAnimation();
});