jQuery - how to create smooth effect for this slider? - javascript

I have a slider, what have an active item which is larger than others. When the controls are clicked, the next/prev item gets the active class. It is working, but I'd like to add a smooth effect for this. Any ideas?
Code:
$('#next').click(function(){
$('#wrap').find('.active').removeClass('active').next().addClass('active');
$('#wrap img:first').remove().appendTo('#wrap');
});
$('#prev').click(function(){
$('#wrap').find('.active').removeClass('active').prev().addClass('active');
$('#wrap img:last').remove().prependTo('#wrap');
});
Example: http://jsfiddle.net/zXjzU/1/
Thanks!

I'm not sure what you define as a "smooth" effect, but a really simple solution given your existing code would be to just add a transition:width 1s to your #wrap img CSS. See JSFiddle:
#wrap img {
width: 100px;
clear: both;
margin: 0 5px 30px 5px;
transition:width 1s;
}
I'm not sure that I'd construct a carousel like this, I'd probably use positions so that my elements scrolled into the center of screen, but it's pretty easy to Google a solution for that too if that's what you're after.

Related

when we collapse transition is not good

When we expand transition is smooth but when we collapse transition is not good... when its about to collapse I see a shake.
I played with transition but its not working. Can you help me providing my code in the fiddle?
.accordion-section {
border-bottom: solid 1px #000;
}
.accordion-section > h3 {
padding: 6px;
font-size: 16px;
background-color: #CCC;
margin: 0;
}
.accordion-section > .body {
height: 0;
padding: 0 10px;
overflow-y: hidden;
transition: height .5s;
transition: height .5s, padding-top .5s, padding-bottom .5s;
}
You can transition max-height instead of height and enclose the body content with padding, etc inside of the element you're transitioning (added .body-inner in .body). I also added a transition for scale() as it will cause a more "accordion" style collapse, but you can try it without that.
with scale() - http://jsfiddle.net/b4L6kyg4/93/
without - http://jsfiddle.net/b4L6kyg4/94/
Just give the initial div background color green. when the accordion is closing it doesn't have any background so it makes it look as if the div is flickering.
.accordion-section > .body {
background: green;
}
There are a couple of things you can do:
First, accelerate some device's hardware by using -webkit-transform: translate3d(0,0,0); . Second, use the CSS animation property transition timing function. I am not sure which effect you are trying to achieve, but you have "ease" on certain elements. Try experimenting with "ease-out". Third, the CSS transitions you're using may not be aligned perfectly with your elements, so when the transition finished running, the div snaps back to its place. A quick patch for this problem may be animation-fill-mode: forwards; . Your fiddle does not have the actual #keyframes for animation, so it is hard to give you any further advice.

Controlling the direction of JavaScript .show() / .toggle()?

I'm using JavaScript's .toggle() to have this appear/ disappear:
{
display: none;
position: fixed;
top: 100px;
right: 0;
left: 0;
background: rgba(0,0,0,0.75);
padding: 15px;
}
However, over the duration of the animation it starts from the top-left corner and expands out to the bottom-right corner of the div.
Ideally, I'd like to start it from the both top corners and expand downwards to both bottom corners evenly.
I thought the CSS transition-origin property might have an effect, but it doesn't seem to be the case.
Any ideas? Thanks in advance. :)
I would start a height of 0 and the animate the height property.
function toggle() {
var el = document.getElementsByTagName('div')[0];
if (el.className) {
el.className = '';
} else {
el.className = 'grow';
}
}
div {
background-color: black;
width:200px;
height: 0;
}
.grow {
height: 200px;
transition: height 2s;
}
<button onclick="toggle()">Toggle</button>
<div></div>
I don't know much about jQuery's toggle method, so I looked in the docs, and sure enough it gives some helpful info. (This is a gentle hint that before coming to StackOverflow you should try solving the problem on your own, including looking at any relevant documentation online).
The .toggle() method animates the width, height, and opacity of the
matched elements simultaneously.
The documentation doesn't give any info about customizing how toggle does its animation, so it looks like you're stuck. If I'm understanding you correctly, it seems like you want the element to animate only the height and not the width, so it stays the same width as it toggles and just animates the height. I don't see any way of doing that with jQuery's toggle.
BUT WAIT! It looks like jQuery has another method called slideToggle which does exactly what you want. It's just like toggle except it only animates the height and keeps the width the same. Hooray!
http://api.jquery.com/slidetoggle/
Moral of the story: if you're using a third party Javascript library like jQuery, you really need to get comfortable finding the information you need in the online documentation my friend. :)

jQuery - grow div from center to animate in

Alright I have these divs that I have been animating in/out previously by doing hide() or show(), however that does not look clean and Id like to have them grow out from the center, i.e. grow from width of nothing to their current width.
I am new to jquery animations and don't know how to do this properly. I have tried setting the initial width to 0 and doing:
function panelIn(labDiv) {
var neww = "700px";
$(labDiv).animate({
width: neww
}, 2000);
}
But that grows the div to the right. How can I achieve this? Are there any good ;libraries for animating in divs, i.e. introducing them on the page?
Depending on what you're doing, you might want to just use CSS and .toggleClass().
CSS
#labDiv{
height:700px;
width:700px;
transform:scale(0);
transform-origin:center center;
transition: transform 2000ms ease;
}
#labDiv.show{
transform:scale(1);
}
jQuery
function panelIn(labDiv){
labDiv.toggleClass('show');
}

Can an HTML background be moved with jQuery's animate?

On my webpage, I have the background image set with CSS, using the HTML selector. The background image is basically like a blueprint schematic background. (i.e. A white grid on a blue background.)
CSS:
html
{
display: block;
position: absolute;
background: url(../assets/background.jpg) repeat;
color: #FFF;
margin: 0px;
padding: 0px;
border: none;
}
When the end user clicks a button, I want the background image mentioned above to slide off the screen, towards the top-right direction, making the page appear to be going to a different area on the large blueprint schematic. I am using jQuery, but I cannot figure out how to access the background image from the CSS.
JavaScript:
$("#button").click(function()
{
// Animate the webpage's background, causing it to move
$("html /* Not sure what goes here */").animate({left: "-=10000px", top: "-=5000px"}, 1250);
});
I have tried using a div in the body that matches the width and height of the end user's screen, but a thick, white border appears around the blueprint schematic image, so I guess I will have to stick with adding the image through CSS, on the HTML selector.
How do I achieve the effect that I desire?
https://jsfiddle.net/zaevzm5p/
Working Fiddle
Don't animate the complete HTML as it will animate your whole website so I created a div with the background you wanted instead of setting the background of HTML.
HTML
<body>
<div id="div1"></div>
<button id="button">Click Me</button>
</body>
CSS
#div1 {
position: absolute;
background: url(http://www.austintexas.gov/sites/default/files/files/Animal_Services/cute-kitten-playing.jpg) repeat;
top:0; left:0; height:100%; width:100%;
/* I want *only* this background image to move on the button click */
color: #FFF;
margin: 0px;
padding: 0px;
border: none;
z-index:-1;
}
jQuery
$("#button").click(function () {
// Animate the webpage's background, causing it to move
$("#div1").animate({
left: "-=10000px",
top: "-=5000px"
}, 1250);
});
I use a div instead of the html itself,try this
solution 1
$("#button").click(function () {
// Animate the webpage's background, causing it to move
$("#div1").animate({
left: "-=10000px",
top: "-=5000px"
}, 1250);
});
It can be achieved with CSS transitions too:
Fiddle Example
Less JS, plus CSS
-webkit-transition: 1.25s ease-in-out;
-moz-transition: 1.25s ease-in-out;
-o-transition: 1.25s ease-in-out;
transition: 1.25s ease-in-out;
You could create a div as in void's answer and just animate it's position.
The best and easiest solution would be to use css3 (just google it).
To provide a solution to your original question, you can (if the browser supports it), animate the background position like so:
$("#button").click(function () {
// Animate the webpage's background, causing it to move
$("html /* Not sure what goes here */").animate({
'background-position-x': "100px",
'background-position-y': "100px"
}, 1250);
});
But this is not best practice.
Working fiddle

How to transition a div between two parents?

I have two containers:
<div class="left">
<div id="myDiv">A Div</div>
<div id="myDiv2">A Div</div>
</div>
<div class="right">
<div id="myDiv3">A Div</div>
</div>
The first contains div elements, which are moved with the following jQuery:
$(".left > div").click(function(){
$(this).appendTo('.right');
});
The above, however, provides no animation. I would like to use a CSS transition to animate each div between the two parent elements (From .left to .right).
By the way, this is my CSS:
.left, .right{
position: absolute;
display: block;
box-sizing: border-box;
width: 50%;
height: 100%;
}
.left{background:red;}
.right{background:green; left: 50%;}
.left > div, .right > div{
display: block;
height: 100px;
width: 100px;
margin: 10px;
float: left;
background: #fff;
color: #000;
}
And a Fiddle: http://jsfiddle.net/x270Lndz/
I figure I need to get coordinates and transition between them, outside both .left and .right.
This has already been answered: https://stackoverflow.com/a/974765/2725684
The problem is 2 parts, moving elements in the DOM, and animating that movement, but the suggested is:
Store the position of the div, in its resting state, in the first column.
Append the div to the second column, store that position.
Turn off the visibility of the div.
Create a clone of the div, positioned where the resting state one was at.
Animate this clone across to the position of the appended div.
Turn off the visibility of this clone.
Turn back on the original div that was appended.
The javascript/jquery will execute this so fast you won't see the turning off/on of the divs and it will just appear as if the div they are seeing is the only one that ever existed.
Try adding transition: 0.5s ease-in to the .left div
Ultimately, this is going to be a lot of work, and I don't think I have the time to write every step out in full. But, if you're committed, here goes:
Call getBoundingClientRect() or similar on the first element to get its absolute document position relative to the document / viewport.
Use the same function, and getComputedStyle()s padding to determine the exact pixel at which content would begin in the second div.
Determine the difference between the two coordinates, in order to fake the transition while the elements are still inside their first parent. (Or, move them first, and fake the transition after)
Apply the correct transform: translate style to the elements, so that they'll appear to move into the other container. (This is assuming you have the transition properties set up correctly in CSS)
On the transitionend event, turn off transitions, remove the transform property, and do the actual child move.
Pat yourself on the back and go home early.
So there you have it. There's likely going to be a lot of math involved and small additions/subtractions I'm not able to predict. Hopefully, that outline helps you get started at least. You might also be lucky enough to find an animation library that does all of this for you. (Also note that I assumed the presence of several functions not supported on all browsers, so check to make sure they're okay by your book)
I wrote a jQuery plugin:
$.fn.transitionTo = function(target){
this.each(function(){
$this = $(this);
marginLeft = parseInt($this.css('marginLeft').replace("px", ""));
marginTop = parseInt($this.css('marginTop').replace("px", ""));
offset = $this.offset();
$new = $this.clone().appendTo(target);
offsetNew = $new.css('opacity',0).offset();
$this.css({
position: 'absolute',
left: offset.left - marginLeft,
top: offset.top - marginTop
}).appendTo("body");
setTimeout(function(a,b){
a.css({
left: offsetNew.left - marginLeft,
top: offsetNew.top - marginTop
});
setTimeout(function(a,b){
b.replaceWith(a.removeAttr('style'));
},2000,a,b); //Anim time
},10,$this,$new);
});
};
It is called similarly to .appendTo:
$(".left > div").click(function(){
$(this).transitionTo('.right');
});
...and only requires transition: top 2s ease, left 2s ease; on the div.
Fiddle: http://jsfiddle.net/d9yxrmvo/1/
The only known issue with this plugin is the lack of support for animating the original element's siblings.

Categories