http://jsfiddle.net/E6cUF/
The idea is that after the page finished loading the grey box slides left from behind the green box, if possible bounce a little.
Edit: made a new version based on changes people made to the jsfiddle and the comment from Nicola
http://jsfiddle.net/RBD3K/
However the grey one should be behind the green one and slide from right to left so it appears
To have it bounce you are missing two things i think:
1) you need to load jquery UI.
2) put the bounce effect after the animate effect:
$('#test').click(function() {
var $marginLefty = $('.left');
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() :
0
}).effect("bounce", { times:5 }, 300);
});
updated fiddle: http://jsfiddle.net/nicolapeluchetti/E6cUF/4/
Try this . Not sure if this is what you want.
$('#test').click(function() {
var $marginLefty = $('.left');
var $marginRight = $('.right');
$marginLefty.animate({
marginLeft: 0
},{ duration: 200, queue: false });
$marginRight.animate({
marginLeft: 100
},{ duration: 200, queue: false });
});
Update: from your updated fiddle,add for .right position :absolute;z-index:1000 as css
http://jsfiddle.net/E6cUF/11/
Related
How would one make a slide and fade in animation like in seen in the green and pink boxes on sharethis.com? In particular I like the one in the blue box with the arrows. Are there a set of JavaScript codes or CSS effects?
The easiest would probably be to use a library like this:
http://janpaepke.github.io/ScrollMagic/
I see that for the arrows effect the css-height property is animated when you scroll. This is done in javascript. But you can also achieve this effect through CSS3-transitions.
Update: Slide and wipe effects from the demo page:
// ani
var pinani = new TimelineMax()
// wipe
.add(TweenMax.to("#wipe", 1, {
width: "100%"
}))
// slide
.add(TweenMax.to("#slide", 1, {
top: "0%",
ease: Bounce.easeOut,
delay: 0.2
}));
// pin
new ScrollScene({
triggerElement: "section#pin",
duration: 1100
})
.on("progress", function () {
// keep centered even though width changes
$("#wipe h3").width($("#pin>h3").width());
})
.setTween(pinani)
.setPin("section#pin")
.addTo(controller);
I need to animate an image and fade it out at the same time.
The image is situated in the right of the page, I need to move it to the left and fade it out so that when it reaches the left it is totally disappeared. I tried to combine .fadeOut and .animate (see example below) but actually the image moves, stops and then fadeout. Can you help me?
<script>
$("#link").click(function() {
$("#image").animate({
marginLeft: "-1000px"
}, 1500).fadeOut(1600);
});
</script>
Thank you
Change the opacity of the element. By settings this to zero, the element will fadeout to the duration of the animation.
Code:
$('#link').click(function() {
$('#image').animate({
marginLeft: '-100px',
opacity: 0
}, 1500);
});
Example: http://jsfiddle.net/QqfLL/
Set opacity of #image to 0 and try this :
$("#link").click(function() {
$("#image").animate({
marginLeft: "-1000px",
opacity: 1
}, 1500);
});
You will have to check if this work correctly in IE.
Any ideas on how to animate the width and height of a div from the top center?
Tried using effect('scale') but this is based on a show/hide so snaps back after completion.
Then tried a normal animate:
$('.box').animate({'width':200px,'height':200px,margin-left:-100px});
This works, but as there is a line of .box, I want the others to react and push to one side.
Fine Tuned
FIDDLE
$('.day').hover(function() {
if($(this).index()==0){
$(this).animate({'width':400,'height':400}, 500);
}else{
$(this).animate({'width':400,'height':400}, 500);
$(this).parent().stop().animate({'margin-left':'-100'} , 500);
}
}, function() {
$(this).animate({'width':200,'height':200}, 500);
$(this).parent().stop().animate({'margin-left':'0'}, 500);
});
Maybe like this:
$('.day').hover(function() {
$(this).animate({'width':400,'height':400, 'margin':'-100px -90px'});
}, function() {
$(this).animate({'width':200,'height':200, 'margin': '0 10px'});
});
Fiddle: http://jsfiddle.net/dmYY3/3/ ?
I have found jQuery: FadeOut then SlideUp and it's good, but it's not the one.
How can I fadeOut() and slideUp() at the same time? I tried two separate setTimeout() calls with the same delay but the slideUp() happened as soon as the page loaded.
Has anyone done this?
You can do something like this, this is a full toggle version:
$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
For strictly a fadeout:
$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');
Directly animating height results in a jerky motion on some web pages. However, combining a CSS transition with jQuery's slideUp() makes for a smooth disappearing act.
const slideFade = (elem) => {
const fade = { opacity: 0, transition: 'opacity 400ms' };
elem.css(fade).slideUp();
};
slideFade($('#mySelector'));
Fiddle with the code:
https://jsfiddle.net/00Lodcqf/435
In some situations, a very quick 100 millisecond pause to allow more fading creates a slightly smoother experience:
elem.css(fade).delay(100).slideUp();
This is the solution I used in the dna.js project where you can view the code (github.com/dnajs/dna.js) for the dna.ui.slideFade() function to see additional support for toggling and callbacks.
The accepted answer by "Nick Craver" is definitely the way to go. The only thing I'd add is that his answer doesn't actually "hide" it, meaning the DOM still sees it as a viable element to display.
This can be a problem if you have margin's or padding's on the 'slid' element... they will still show. So I just added a callback to the animate() function to actually hide it after animation is complete:
$("#mySelector").animate({
height: 0,
opacity: 0,
margin: 0,
padding: 0
}, 'slow', function(){
$(this).hide();
});
It's possible to do this with the slideUp and fadeOut methods themselves like so:
$('#mydiv').slideUp(300, function(){
console.log('Done!');
}).fadeOut({
duration: 300,
queue: false
});
I had a similar problem and fixed it like this.
$('#mydiv').animate({
height: 0,
}, {
duration: 1000,
complete: function(){$('#mydiv').css('display', 'none');}
});
$('#mydiv').animate({
opacity: 0,
}, {
duration: 1000,
queue: false
});
the queue property tells it whether to queue the animation or just play it right away
Throwing one more refinement in there based on #CodeKoalas. It accounts for vertical margin and padding but not horizontal.
$('.selector').animate({
opacity: 0,
height: 0,
marginTop: 0,
marginBottom: 0,
paddingTop: 0,
paddingBottom: 0
}, 'slow', function() {
$(this).hide();
});
I have this site I am developing - I made the scroller with the following code:
$(document).ready(function()
{
function scrollIt()
{
$('#featured-brands div#scroll').animate({
marginLeft: "-4550px"}, 85000, "linear").animate({
marginTop: "-223px" }, 200, "linear").animate({
marginLeft: "750px" }, 100, "linear").animate({
marginTop: "57px" }, 1, "linear", scrollIt);
}
scrollIt();
});
When the final image is sliding across, there is a white blank space visible, how would I make the first image appear right after the final image, so there is no white space?
Cheers,
Keith
split it into two. When one goes off the bottom, move it so it's above the other.