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 ;)
Related
I found the js library for easing functionality, but somehow it won't work...
here is the jsfiddle i created.
jsfiddle
$(".top").click(function(){
$(".top").animate({ left: '100px' }, 600, 'easeOutBack');
});
(it doesn't have the js/easing.js option tho)
I was trying to implement the bouncing up and down animation for a div when clicked.
Any help would be appreciated!
I have updated your jsfiddle to do what you want:
http://jsfiddle.net/qy57G/7/
Im using jquery 1.9.1 with jquery.ui 1.9.2
$(".top").on('click', function () {
$(".top").animate({
left: '100px'
}, 600, 'easeOutBack');
});
In addition i removed your float css and added position: relative as you are animating to a position.
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/
Hey guys i got an image inside a div and iam moving it down at a specific time by giving it a delay. I was just wondering when it is moving down how do i make it become smaller as it goes down the screen till eventually it disappears completely at a specfic location i gave it.
So far this code makes it move down with a delay function on it and a duration.
$('#fourth').animate({
width: '100px',
height: '100px'
}, 3000, function() {
$(this).show('fast').animate({
top : '-=-100'
},
{duration: 2000}
)
Thanks for all the help
Just add the width and height to the animate.
$(this).show('fast').animate({
top : '-=-100',
width: 0,
height: 0
},
{duration: 2000})
http://jsfiddle.net/xMV5Q/1/
Also, -=- is the same as += which is a bit more understandable.
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 would like to create an interface with 3 columns, each having mixed content (text, image, and video), and would like to have them scroll vertically with different speeds at the same time. Is there a relatively simple way of accomplishing this with html, css, and/or javascript?
PS. I know about the parallax scrolling, but the implementations I came across seem to be mostly about using images as background to create a dimensional illusion.
Something like: http://jsfiddle.net/KVWuS/.
$.fn.makeScroll = function(speed) {
var elem = this,
i = 0;
setInterval(function() {
elem.scrollTop(i++); // increment scroll top
}, speed); // run every 'speed' ms (so lower is faster)
};
You can enable it like:
$('div:eq(0)').makeScroll(75); // moderate speed
You want to actually scroll the content?
$('.column').animate({
scrollTop: $('.column').height() - $(window).height()
}, 1000);
This will scroll your column down in 1 second. Adjust the speed per column.
EDIT:
I was assuming your columns were the height of the window. If not, you'll have to adjust the scrollTop.
I think a simple workaround would be to create 3 div Elements with the following Attributes:
overflow: hidden;
width: x px (fixed width)
height: x px (fixed height)
top: 0px;
left: x px;
Then you have to capture the onscroll event and set the top-Attribute.
E.g.
div1: top: -100px
div2: top: -300px
div3: top: -500px
I hope my description is clear.. :)
That should work