With jQuery there is the hide() function.
When you add a duration to the hide function like so
$('#myclass').hide(1000);
<div id="myclass">
<p>yolo</p>
</div>
It will start from the bottom and animate up over the course of one second.
My question is how could I change the direction it will start from.
From the docs for .hide( duration ):
When a duration, a plain object, or a "complete" function is provided, .hide() becomes an animation method. The .hide() method animates the width, height, and opacity of the matched elements simultaneously. When these properties reach 0, the display style property is set to none to ensure that the element no longer affects the layout of the page.
The element only appears to be animating up and left because it's positioned by its top-left corner.
To have it animate in another direction, it'll have to be positioned on a different corner:
#myclass {
position: absolute;
bottom: 0;
right: 0;
}
Example: http://jsfiddle.net/W7hqy/
You can't do this with the hide method Assuming your using jQuery you will need to use animate like so
$('element').animate({
marginLeft: '-400px'
}, '5000', function(){
$(this).hide()
});
Demo: http://jsfiddle.net/e6BBA/
Try this.
$('div').on('click', function(){
$(this).animate({
width: 0
});
});
Demo: http://jsfiddle.net/e6BBA/1/
Related
I have a notification that pops up during difference instances on my site, and I'd like that notification to follow the menu that animates when you scroll down.
The code I have is as follows:
<script type='text/javascript'>
var messageFollow = $('.woocommerce-info').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= messageFollow) {
$('.woocommerce-info').css({top: "150px"});
} else {
$('.woocommerce-info').css({top: "74px"});
}
});
</script>
The notification has a value right now of top: 150px which looks great when you're at the top of the screen but top: 74px looks great when scrolled down.
I also want it to animate, but I have no idea how to implement that as well.
A clip to demonstrate: https://www.dropbox.com/s/p6i95f5gkbyn4nm/MessageNotification.mov?dl=0
jQuery has a built-in animate function.
Just replace css with animate and make sure the value is integer.
You can also give a duration in milliseconds as a second parameter to animate function.
$('.woocommerce-info').animate({top: 150},500);
I'm working on a web project. I want to draw a div element (looks like a table) with an animation: I click on the button, then the div element appears with a small size upon the button, then it floats to "its" posion meanwhile gaining its original size.
I managed to do this, but only sequentely. First the scaling, than the floating. I want these animations to do at the same time.
I use jQuery ui show() function to make the div appear and scale to its origin size, then I use the jQuery animate fuction for the floating.
I tried to use the queue : false property. And I also called the .dequeue() function, but it woulnd't work as I wanted so.
I'll appreciate any pieces of advice. Thanks in advance. Cheers.
$('#matrix').animate({
top: positionTop,
left: positionLeft,
});
$('#matrix').show("scale", { percent: 100, direction: 'both', origin: ['top', 'left'] }, 2000);
$('#matrix').animate({
top: positionTopAim,
left: positionLeftAim
});
Fiddle here: LINK
var $matrix = $('#matrix');
// store original size
var size = {
width: $matrix.width(),
height: $matrix.height()
};
$matrix.animate({
top: positionTop,
left: positionLeft,
});
// Sets the width and height to 0
$matrix.width(0).height(0).show();
// animates into original size
$matrix.animate({
width: size.width,
height: size.height
}, {queue: false});
$matrix.animate({
top: positionTopAim,
left: positionLeftAim
}, {queue: false});
queue: false does the stuff
Here's the workaround
For further working with jQuery, prevent yourself from using the same selector twice/more-than once. It's not efficient. There's a formal directive to store the jQuery object into variable called "$something".
For more information visit this site.
Good Luck ;)
I am doing a rather simple Tween animation using MooTools. The opening animation is perfectly smooth. But then I added the closing animation (opposite of the opening animation), but it seems to stutter/hiccup at the end almost every time.
I tried the following with no success:
Removed all HTML content from the expanding DIV
Passing the Bounce settings directly to the Set function instead of using the variable
Commented the #content animation to be sure there is only 1 animation running
Commented the addClass and removeClass actions
I can't figure out what's causing the problem. Maybe someone else can have a look…
I put the test-case online here: http://dev.dvrs.eu/mootools/
window.addEvent('domready', function() {
// Set initial Div heights
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
// Set Div heights on Window resize
window.addEvent('resize', function() {
$('sideBar').setStyle('height', window.getSize().y);
$('sideMenu').setStyle('height', window.getSize().y);
});
var bounce = {
transition: Fx.Transitions.Back.easeOut,
duration: 500
};
$$('.button.closeMenu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 0);
$('content').set('tween', bounce);
$('content').tween('margin-left', 90);
});
$$('.button.menu').addEvent('click', function(event) {
event.preventDefault();
$$('.button').removeClass('active');
this.addClass('active');
$('sideMenu').set('tween', bounce);
$('sideMenu').tween('width', 300);
$('content').set('tween', bounce);
$('content').tween('margin-left', 390);
});
});
Fiddle with example here
The transition you are using goes over the values defined as final value in the .set(property, value);. So when opening the final width is 300px but the transition/effect goes over that and than soft back to the final value.
This works great when opening because width can be 310px or more and then return to 300px, but when with has a transition under the with 0px, it doesn't work so good. It actually works ok if the final width is 10px (check here), but that's not the effect you want.
So my suggestion is to fix it with CSS, or change the transition when closing the sidebar, or use another effect altogether.
Option 1: fiddle - same transition opening, no easeout closing
Option 2: fiddle - same effect as you have but played with CSS and hidded 10px of the sidemenu under the sidebar. (z-index:3; on #sideBar and left:80px;width: 10px; on #sideMenu. Also 10px as the final value for the tween.)
To check different transitions at Mootools demo's look here.
I want to achieve something like :
$("#left").hide('slide', {direction: 'right'}, 1000)
However I do not want the div to be hidden I want it to keep up space so I want have the visibility hidden like:
$("#left").css('visibility','hidden')
Yet still achieve the same effect as above.
This is what I'd do
$parent = $('#left').parent(); //store the parent of the element in a variable
$('#left').clone() //clone the existing element
.appendTo($parent) // insert it into the current position
.css('visibility','hidden') //set it's visibility to hidden
.end().end() //target the initial element
.slideUp() //do any slide/hide/animation that you want here, the clone will always be there, just invisible
This could be horrible, but it's the only way I could think of solving the problem :)
EXAMPLE: http://jsfiddle.net/skyrim/j2RWt/4
Try this:
var $content = $("#left");
var offset = $content.offset();
$("<div></div>").css({
width: 0,
position: "absolute",
left: offset.left,
top: offset.top,
height: $content.outerHeight(),
backgroundColor: "White"
}).appendTo("body")
.animate({
width: $content.outerWidth()
}, 1000, function () {
$content.css('visibility', 'hidden');
$(this).remove();
});
EDIT
So, after learning what the actual need was (:p), this method basically place another div over the original element. I've tested it on IE...and I'll edit this with an update after I do further testing on other browsers!
EDIT
Only Chrome seems to be having an issue with getting the correct height.
Added a callback which removes the makes visibility hidden (as LEOPiC suggested) and removes the slideout div
You can do it in very simple way. There is really a nice tutorial here to animate in different direction. It will surely help you. try this
$('#left').animate({width: 'toggle'});
EXAMPLE : http://jsfiddle.net/2p3FK/2/
EDIT: One more solution, this is very simple to move the div out of window with left margin
$("#left").animate({marginLeft:'1000px'},'slow');
EXAMPLE : http://jsfiddle.net/2p3FK/1/
I am using the following code to expand and center on div on :hover
$(document).ready(function(){
//animation on hover
$('#sliding_grid li').hover(function() {
$(this).addClass('highlight');
}, function() {
//$(this).removeClass('highlight');
});
$(".highlight").live("hover", function(){
$(this).animate({"width": "454px", "height":"282px", "top: ":"94px", "left":"152px", "margin-top: ":"-94px", "margin-left":"-152px"}, 500);
});
$(".highlight").live("mouseout", function(){
$(this).animate({"width": "148px", "height":"90px", "top: ":"0px", "left":"0px", "margin-top: ":"0", "margin-left":"0"}, 500, function(){
$(this).removeClass('highlight');
});
});
});
My problem is two things:
1) I'm not sure how to reset the "top" and "left" css coordinates to their original value on mouseOut. To see a working demo, go here:
http://jsfiddle.net/kTFvj/1/
2) The z-index (see here: http://jsfiddle.net/kTFvj/1/) is not affecting the :hovered grid elements. Not sure why.
You can use jQuerys .data method to store the original values and retrieve them on mouseout
I have made a modification to your original code that might work like you wish.. it uses .data and also updates the z-index so the active element is always on top
http://jsfiddle.net/kTFvj/2/
as Martin said, store the values when the animation begins using a variable, and restore when done.
about z-Index: just have a variable called maxZIndex=0
and everytime an animation begins, set the object's zIndex property to maxZIndex++
What about using % instead of pixels?
Another solution is saving the actual value of width and height in some vars and restoring on mouse out.