why the animation do not work properly in my slider? - javascript

I have a jQuery simple slider it has 15 picture each five show in a slide. I have a previous button and next button.
Each next click generate a left movement by 855px with a slider animation.
Each previous click generate a right movement by 855px with a slider animation.
This is my jQuery code :
$(document).ready(function(){
$(".prev_button").click(function(){
$("ul.slider").animate({
left: "+=855"
}, 3000, function(){
$("ul.slider").css('left', '0');
li_no = 0;
$("ul.slider").find("li").each(function(){
li_no = li_no + 1;
});
slide_after_this = li_no - 6;
$('ul.slider li:gt('+slide_after_this+')').prependTo('ul.slider'); // << line changed
});
});
$(".next_button").click(function(){
//alert($("ul.slider").css("right"));
$("ul.slider").animate({
right: "+=855"
}, 3000, function(){
//alert($("ul.slider").css("right"));
$("ul.slider").css('right', '0');
$('ul.slider li:not(:nth-child(n+6))').appendTo('ul.slider');
});
});
});
Now I have two problems :
First one is with the previous button (left arrow) When I click it the animation shows and the elements changed but they do not wrapped with each other (I mean does not show the last elements immidiatly before the first element). I can not find the reason of this.
Second problem is with both right and left arrows it is like following :
If I click just the right arrow the slider working fine it animates and change the elements but If I click the both button in order (I mean right then left or left then right ) the elements change but the animation does not show. but I check if the routine go inside the animate function by some alerts and it is going inside but does not animate on the screen .
This is a link that may help you:
http://jsfiddle.net/mpx83tpv/18/

you are really close try overflow:hidden for .slider_container
div.slider_container
{
height:380px;
width:855px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
edit js:
also use below code as you are using both right and left in the end the slider has both of them one of them is always zero.
$(document).ready(function(){
$(".prev_button").click(function(){
$("ul.slider").animate({
left: "+=855"
}, 3000);
});
$(".next_button").click(function(){
//alert($("ul.slider").css("right"));
$("ul.slider").animate({
left: "-=855"
}, 3000);
});
});
if you want a infinite scrolling you need to use right and left in this case replace your $("ul.slider").css('right', '0'); line to $("ul.slider").css('right', ''); do same for left as well, as you need the remove them.
for adding the next visible div implement you logic before the animation as you callbacks do it after the animation.
the tricky part would be the prev button for this after calculation of the div count you also need the set new left without animation and then call left move animation.
hope these make sense.

Related

jQuery transition effect when hiding 3 columns and expanding one to be 100% of row

My page initially starts out with 4 wrapper divs that each have a class of 'col-md-3' but after an expand button is clicked 3 of the wrappers are hidden and the clicked one gets 'col-md-12':
// If wrapper is the current wrapper expand to col-md-12 otherwise hide
$(".wrapper").each(function (index) {
if ($(this).attr("id") === wrapper.attr("id")) {
$(this).removeClass("col-md-3").addClass("col-md-12");
} else {
$(this).hide();
}
});
Is there any fast/easy way to animate something like this? I prefer not adding jQuery UI library to my project. I prefer a slide left to right motion.
The only thing I could come up with so far is doing:
$(this).hide('1000');
However, I prefer doing the animation on the adding of class "col-md-12" not the hiding of the others.
I prefer a slide left to right motion.
In JQuery you can animate Elements with
$(this).stop().animate({
right: '-50%' //distance of moving
}, 400); //time of moving in ms

CSS3 image slider, javascript navigation through slides not working?

I've been trying to adapt the following code to integrate with my CSS3 slider (animated and timed with keyframes) however as you can't use .animate in js when using css3 animations on the same element I either have to use one or the other.
JS I've adapted for my slider
The current js works in the sense that it navigates through the slides my only issue is that it doesn't 'slide' to each slide it jumps.
I'd really like to keep the slideshow as it is and just want to update my js so that the slide transition works. I'm not great with js so I've been finding it difficult to find a solution.
If anyone could give some advice or a solution to my problem it would be truly appreciated.
DEMO
JS
//grab the width and calculate left value
var item_width = $("#carousel .video-list li").outerWidth();
var left_value = item_width * (-1);
//if user clicked on prev button
$('#previous').click(function () {
//get the right position
var left_indent = parseInt($("#carousel .video-list").css('left')) + item_width;
//slide the item
$("#carousel .video-list").animate({'left' : left_indent}, function () {
//move the last item and put it as first item
$("#carousel .video-list li:first").before($("#carousel .video-list li:last"));
//set the default item to correct position
$("#carousel .video-list").css({'left' : left_value});
});
//cancel the link behavior
return false;
});
//if user clicked on next button
$('#next').click(function () {
//get the right position
var left_indent = parseInt($("#carousel .video-list").css('left')) - item_width;
//slide the item
$("#carousel .video-list").animate({'left' : left_indent}, function () {
//move the first item and put it as last item
$("#carousel .video-list li:last").after($("#carousel .video-list li:first"));
//set the default item to correct position
$("#carousel .video-list").css({'left' : left_value});
});
//cancel the link behavior
return false;
});
I don't see why .animate is needed, because I have used
transition: left 1s ease;
in my CSS to achieve the same things, with a smoother animation than I got with jQuery. I tried deleting the:
//slide the item
$("#carousel .video-list").animate(...
for the left and right. I also added some text to the html divs so that you can see how it's moving better. Sorry that I couldn't get it working, but I really feel that "transition" is what you need to look into. Here's the fiddle :)
...
I think your simplest solution would be to ditch the whole CSS animate, and build your own carousel:
Consider a film strip, which is a bunch of pictures lined up next to each other. Now consider a paper with a box cut-out, the size of one picture. We put the strip behind the paper, and see only one image. If we move the strip, we can change which image we see.
The film strip will be a div with { display: inline-block; } property, containing each of the videos. The box cut-out will be a div with { overflow: hidden } property. To move the strip, we simply use $('#strip').css({'left': positionofstripleft - widthofbox }) in our javascript. And for the animation, a simple setInterval(Nextfunction, 65000) to do what clicking next would do every 65 seconds.
Finally, a CSS transition will make the movements actually animated.

JQuery image carousel animation, works going one way but not the other

The code is pretty short, here it is:
http://jsfiddle.net/L4Ry3/170/
$(document).ready(function(){
$('#previous_frame').on("click",function(){
var $last = $('.frames li:last-child')
$('.frames').prepend($last)
$last.css({left:'-33%'})
$last.animate({left:'0%'})
});
$('#next_frame').on("click",function(){
var $first = $('.frames li:first-child');
$('.frames').append($first);
$('.frames li:first-child').css({right:'-33%'});
$('li:first-child').animate({right:'0%'})
});
})
If I click the left button, it slowly moves the image. When I click the right side, the image instantaneously switches into position. I can't understand why this would happen.
It is because of the left rule you add. It stays 0. You can notice it works at first, then stops working for images you clicked left on, but keeps working for the rest.
In the next_frame function add
$('.frames li:first-child').css({left:''});
to remove that left.
You can see it working in this fiddle.
Test it out by clicking left all through, then clicking right again.
In Depth
Apparently the left style rule is more dominant than the right. When you have both it regards only the left, so though the right is animating, it stays on 0% left. Removing the left rule allows the css engine to regard the right and show the desired animation.
change the right to left in your next frame click event and - to +..that should do the trick
try this
$(document).ready(function(){
$('#previous_frame').on("click",function(){
var $last = $('.frames li:last-child')
$('.frames').prepend($last)
$last.css({left:'-33%'})
$last.animate({left:'0%'})
});
$('#next_frame').on("click",function(){
var $first = $('.frames li:first-child');
$('.frames').append($first);
$('.frames li:first-child').css({left:'33%'}); //<----here
$('li:first-child').animate({left:'0%'})//<----here
});
})
working fiddle

How to make the Animate jQuery method stop at end of div?

I am trying to create a customized carousel and it already has the following features:
You can move left and right with the mouse or by swipe on mobile/tablets.
You can move left or right with buttons.
However, the problem is that the buttons don't deactivate once the end of the div is reached. Instead, everything keeps shifting forever. See picture below:
Take a look at the jsFiddle: http://jsfiddle.net/vnkRw/2/
$("#left").click(function() {
$(".wrapper").stop(true, true).animate({left: "-=125px"}, 500);
});
$("#right").click(function() {
$(".wrapper").stop(true, true).animate({left: "+=125px"}, 500);
});
How can I deactivate the buttons once the end is reached? For example, when here:
The left button should deactivate since there are no more div's to show.
And, of course, the same for the right:
The Goal: Deactive buttons when end is reached.
something like
pos=slides=$(".wrapper > div").length;
$("#left").click(function() {
if(pos>3){$(".wrapper").stop(true, true).animate({left: "-=125px"}, 500);pos--;}
});
$("#right").click(function() {
if(pos<slides){$(".wrapper").stop(true, true).animate({left: "+=125px"}, 500);pos++;}
});
$('.carousel').kinetic();
There are some things to consider when doing carousel, I'll just get you started.
Will all items be the same width
Will all items have same margins
Will the things above be variable
It we presume that all the things above are static, the idea is for the scroll to right to not happen if the left position of wrapper is 0. And that's the easy part. For the other direction you have to take the number of all items, subtract the number of visible items (in your case 3) , multiply that by their width (including the margin) and all this providing all items are same width and with same margin .. and in the end you have to multiply that by -1, because your wrapper's left position becomes negative number. And in the end, if wrapper reached that position, you should not scroll it.
A visualization of the above mini-wall of text:
http://jsfiddle.net/vnkRw/4/

jquery .animate() - this code sort of does what i want

I am trying to make a div slide down when the mouse moves over another div just above it. Basically the div above it is just the trigger that makes the div slide down. Mouseover of .trigger makes .slidedown expand, and mouseout of .slidedown makes itself slide back up. Here's the code i have so far:
$(document).ready(function() {
$('.slidedown').hide();
//When mouse rolls over
$('.trigger').mouseover(function(){
$('.slidedown').stop().animate({
height: ['toggle', 'swing'],
}, 600, function() {
// Animation complete.
});
});
//When mouse is removed
$('.slidedown').mouseout(function(){
$('.slidedown').stop().animate({
height:'0px'
}, 600, function() {
// Animation complete.
});
});
});
This works, but there are just two teaks i need help with. Firstly, after mouseout and the .slidedown div slides up and disappears, if i then mouse over the .trigger div again, nothing happens. It should make the .slidedown move down again. I need it to every time keep working. I tried removing the .stop() but it still doesn't work.
Also can i make it also slide back up if the mouse moves out of .trigger but only if it isn't moving out of .trigger into .slidedown? This is so incase the user doesn't move the mouse into .slidedown, it would remain forever which isn't good. Or just have a time limit that it can remain expanded if the mouse doesn't move over .slidedown.
Second, is there a way to make a delay of around 1 second between mouseout and the div sliding back up? Thanks for your help!
You might try using the jQuery hover event. For the delay, you can put the closing animation in setTimeout:
$(document).ready( function(){
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
setTimeout( function(){
$('.slidedown').stop(true,true).animate({
height: '0px',
}, 600, function() { /* animation done */ });
}, 1000 );
});
});
You might also look into the hoverIntent plug-in for more nuanced control over the mouseenter/mouseleave behavior, including timing.
I think you'll find that setting a numerical height in $('.trigger').mouseover() may help the animation be repeatable. FYI, you can set an integer number for something like height or width in jQuery and it will automatically set the unit to px for you.
As Ken pointed out, setTimeout is useful for a delay in code, but keep it in your $('.slidedown').mouseout() event or the slideown div will hide after you mouseout of the trigger div instead of when you leave the slidedown div as you specified.

Categories