I have a div that I want to apply a bounce effect to. It's class gives it some left padding to center it on the page.
After examining what happens during the effect with Firebug, it seems that it adds an effect wrapper class and removes my original class. This causes the div to move from the center of the screen, to the left of the screen (padding removed), it bounces, and then it moves back because the class is reapplied. Is there anyway to stop this from happening?
Wrap the bouncing div in another div that has the class used for centering.
Related
I have a div that I animate away using a fade. Upon finishing, I believe it sets display:none at which point, the content below it jumps up to fill the space. How can I make this more smooth? I thought maybe at the end of the animation I could insert a visibility:hidden div of the exact same height, and animate its height shrinking. But this feels like such a common thing to do, I don't want to reinvent the wheel here.
display: none removes the element from the DOM completely and naturally the rest of the elements will just 'jump up' up to take its place... If you don't want this you can simply set it visibility: hidden or opacity: 0... instead of creating a placeholder div with the same...
I have the following scenario on JSFiddle: http://jsfiddle.net/psax3fge/
D FIDDLE: http://jsfiddle.net/psax3fge/1/
Basically its a div that has some info in it. The info is 3 separate divs that are inline block, they will be next to each other if there is enough room but will stack underneath each other when the Windows is made smaller
I want this div to be hidden until a button is clicked where the div slides down. I know not setting the height property will make the div have a fluid height (height gets bigger as things stack underneath each other). However, when I animate it with jQuery, I have to set a height.
Is there a way to do this without losing the fluidity of the div? An alternative is to not animate the div and just make it visible/hidden on button click, but I'd really like to use the animation
Update 4: http://jsfiddle.net/psax3fge/4/
Leave the .container div height to auto and remove the overflow from it.
Now you can use the slideToggle function of the jQuery to show and hide the .container.
P.S you can set display:none to container in initialization.
I set up a code that have this traits:
the navigation Items-texts- are hidden behind the some Divs I'll call them Navigation Divs
when the mouse move over the some of pixels-navigation Divs-, the text that they are behind this, slide right and left and in some cases, some of them move top and bottom about 15 px with animate() method...
when the mouse move to another Div, other text will be reset to first position
for next action and I did this with:
$(document).on('mouseover', '.pixel#p18', function(){
$('.submenus').not("this Div's TEXT").fadeOut('fast').removeAttr('style');
});/* this Div's Text is for Example*/
and I wrote this kind for all of my navigation texts..
Now my problem is:
When I hover mouse on one of navigation Divs, some of the texts that they did not animated, become to visible because of removeAttr('style')!!! But I don't want that...
is there any alternative way that I can slide the texts or other elements to left, right, top and down with optional values of move...??? for example 23px to left or 17px to top... etc???- I'm familiyar with slideUp and Down and toggle but not sure that they are good enough for my code...
Do you have some better Idea for this---that actualy you'll have because I think this is very bad
and the last Question is that why my codes are very slow in running? the animations that I wrote have lak some times and I'm not Sure that the problem is my selector or other stuff.
For this you need something like .animate which has a callback. So something like:
$('.submenus').not("this Div's TEXT").animate({opacity:0},500,'linear', function() {
$(this).removeAttr('style');
});
This will only remove the attribute when the animation is complete.
I'm very new to CSS/HTML/JS so I don't have lots of experience with CSS transitions.
I'm trying to animate a div elements on my page, but I can't achieve a desired result so far.
Here is my problem:
In my HTML I have a div container element that has 5 div elements inside of it. They look like simple boxes positioned in the middle of the screen and aren't visible for now. I also have 5 buttons in the corner of the screen.
What I'm trying to do is:
when I click a button (for example button 3) 3 of the divs on the left should disappear and be moved to the left behind the margin of the screen and 2 of the divs should do the same, but move to the right. After that I want 3 divs that are on the right slide back to the screen and 2 divs on the right should slide back as well. So it looks like they sliding towards each other to the positions they started from initially.
I'm trying to do this effect using CSS transitions (transform: translateX(Npx);). So in my JS file I have something like this:
$(document).ready(function() {
$(".button").click(function(){
// PART 1
// move 3 divs to the left using transform: translateX(Npx) (no animation)
// move 2 divs to the left using transform: translateX(Npx) (no animation)
// PART 2
// slide 3 divs to the left using transform: translateX(Npx) (with animation)
// slide 2 divs to the left using transform: translateX(Npx) (with animation)
});
So the problem is that in this case only the part one works and part two seems to be not working.....if I attach the part on code to a different event...like another click button...it works just fine.
So my question is if these two transitions can be done under one event?!?!
I have done this, and this kind of effect can look great. If I understand your question correctly, your issue is that you run the animation AFTER you moved the divs, so your animation function uses the wrong starting point.
What you need is:
Be sure you have a CSS position:relative; set on your divs so the animation can work.
Run your animation function moving your divs relative to their current position (i.e. top, left), and include a success callback. You may need to first use offset() and some math to figure out the distance traveled.
On the completion of your animation (success callback), change the relative position of your divs back to 0px (or whatever they were before) and simultaneously perform the function where you actually move the divs to their new position in the DOM using insertBefore(). I've never seen a flicker since these functions are near-instant, but if you see an issue you can set visibility to hidden while you reset the position and move the divs, and then reset the visibility afterward
You can even set custom z-indexes for your divs during the animation that you reset on the success callback, allowing you to determine which elements the divs pass over/under or specifying which is on top if they cross each other.
I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left
Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/
If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.
You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/