I am not very familiar with jquery's animate and I need to create an element which upon click of another element, the element should slide from left to right(currently hides behind another element).
Then shows its full content(like a drop down menu) after extending fully from left to right. I tried doing it using transition effects but its is not that powerful(in terms of flexibilty/control)
Anyone knows a good way to do this? Thanks
[EDIT] hers a jsfiddle of what I am doing so far
$('#menu-btn').click(function(event) {
$('#whole').animate({
left: '100px'
},500,
function(){
left: '-100px'
});
});
I think you need something like:
$('#menu-btn').click(function(event) {
$('#whole').animate({
left: '100px'
},500,
function(){
$('#data').slideDown();
});
});
Slide down the whole instead if that is what you were thinking.
I updated the fiddle. You had .#whole instead of #whole which prevented that style.
EDIT:
See my forked fiddle for a nicer solution: http://jsfiddle.net/6ETK8/6/
Or using css transitions: http://jsfiddle.net/6ETK8/7/
I think you want to do two animations:
animate the element from left to right (slide to right)
animate the contents of the element, or a element inside the first element, from top to bottom (slide down).
animations should run one after the other, not in parallel.
Learn about .animate(). Then you can achieve this by starting the first animation (slide to right), and, in its complete handler, start the second animation (slide down).
By the way, it is possible, an relatively easy, to do this with transitions.
Related
So I made a simple animation in jquery where I animate two rows of images by clicking on the left/right arrows, which moves them to left or right. Now the problem is strange, when I click on the right arrow after loading, the animation works fine and the div with images is animated to the right and returns to it's original position. But when I try to click on the left arrow immediately afterwards, the images won't animate to the left. However, if I press the left arrow and then right, the animation works well enough. So basically after animating to the right there's no turning back and the left arrow doesn't work.
I'm not sure what might be the problem but I've tried animating different elements in the same way and noticed that it's impossible for me to animate the element to the left after animating it to the right (and returning to the initial position). I would appreciate if you could help me with this, I'm still pretty new to jQuery so I might've done a dumb mistake without noticing.
Here's the whole codepen:
https://codepen.io/Ellie555/pen/EBKPVp
I tried a lot of different things, I've previously thought the problem is in the fact that after the animation ends I switch the order of the first and last image in the row, but even after deleting that part the animation still doesn't work properly. I tried switching the order of functions and putting it all under one function, still didn't help.
var distance = $('.first-row').children().last().outerWidth();
var images = $('.img-item');
$('.arrow-right').click(function(){
images.animate({left: distance},400, function(){
images.css('left', '0px');
});
});
$('.arrow-left').click(function(){
images.animate({right: distance},400, function(){
images.css('right', '0px');
});
});
The css "right" doesn't mean to get the coordinates of the element some pixels from the right, but it is counted from right to left, so right: 0px; is at the right of the screen. left: 0px; isat the left of the screen. So if you gave the element a css right property, the left won't have any effect. Try:
for the left click:
images.animate({left: '+=' + distance}, 400)
or
for the right click:
images.animate({left: '-=' + distance}, 400)
I hope I helped you.
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 using a drop-down-menu which I modified to use animations such as SlideOut and FadeIn using onmouseover and onmouseout.
The problem comes after hovering through all of the nested lists a few times, which results in the second nested list becoming cut off.
You can replicate the bug by moving from "nav 1" to "nav 2" and back again rapidly.
Link to jsFiddle
Screenshot of cut-off:
http://dl.dropbox.com/u/53879403/screenshot.png
Please and thank you for any advice / criticism.
Please see this fiddle: http://jsfiddle.net/SuRJ9/
The code I've changed:
function slideDown(toSlide) {
currentHover(toSlide);
$($(toSlide).children('ul')[0]).slideDown('medium',
function(){ $(this).css('overflow','visible') });
}
I've added resetting overflow to visible after finishing animation. overflow is set to hidden by jQuery in order to make sliding animation.
Also, please don't use onmouseout="slideUp(this)" and onmouseover="slideDown(this)", this is obtrusive JavaScript and is a bad technique. You should assign these events using jQuery.
$.fadeOut/In() apply certain styles before running the animation. These are remove when the animation completes.
Your fadeOutNav() is calling stop(true) , which if done while fadeOut() or fadeIn() are working, will leave the style's they have applied to the element. In this case overflow:hidden on the parent ul. You can remove the stop and let the effects bubble up, or insert a .css('overflow','') to your chain.
I have a scrolling div with a visible width that's half of the content. (The actual content is double the width.)
I just want a simple javascript utilizing jquery (serialscroll plugin is really too much) to trigger the scroll to slide into view the next half of the content, then click again the slide it back. (the amount of the sliding is a static #)
I've got a jsfiddle with what I have so far. The initial slide left works, but the slide back does not and then it stops working altogether after that.
http://jsfiddle.net/w7Uvj/1/
Use left alone (or right alone) instead of left and right fiddle
Change your second function to:
$('.back').click(function() {
$('#maincol').animate({
'right':'-=400px'},750);
$(this).fadeOut(500);
$('.next').delay(600).fadeIn(500);
});
jsFiddle example.
You can also set the right property to just 0px as well (instead of -=400px).
I want to do a slide down with jQuery, but I can't find it anywhere.
I do not want it to scale as it slides
I do want it to perform this action ( click slide ), but vertically down, not horizontally right.
UPDATE :
So here's the final functional code!
$(this).toggle(
"slide",
{
direction: 'up',
duration: 'slow',
easing: 'easeOutQuart'
}
);
Read the API-Docs: http://docs.jquery.com/UI/Effects/Slide
You can Slide in every direction using the direction-option.
Demo: http://www.jsfiddle.net/doktormolle/befbE/
(I set the width/height of the image inside the sliding element to 100%, so you can see, the image is not scaled, it's clipped, guess that's what you are looking for)
If you position the element absolutely in a container and attach it to the bottom (ie. position:absolute;bottom:0;) you can use the blind effect and it will slide down to the bottom from the top. See here
If you want it the make own ur you, can you use .animate() and you using css.
something like:
css:
#elm { width: 150px; height: 80px; position: absolute; left: -150px; }
script:
// let it animate
$('#elm').animate({ display: 'block', left: 0 }, 'fast');
else if you dont wanna make it on your own, use that jQuery UI 'slide' effect?
I know what you mean - the items inside the DIV or whatever you are animating look like they are squahsed, and then expand.
Maybe consider hiding the element behind another and either move the masking element up and out of the way or slide the hidden element down using .animate()?
jQuery .click .animate to move down, then back up
This may help.
You can easily achieve this with an inner container that has fixed dimentions.
See this live example. In the fiddle, the first div is without the inner container.
This way when the outer container animates (width/height) the inner container does not grow, simply reveals.
Consider your image of height 150px
First apply height="0"
Use animate to achieve slide down effect
<img src="http://www.google.com/images/nav_logo29.png" id="image_scale" width="200" height="0" />
<script>
$(document).ready(function(){
$("#image_scale").animate({height:"150px"},"5000");
});
</script>
Absolutely position the element you are wanting to slide in and out and use .animate() to change it's position. You can have it slide in from the top, bottom, left, right, on the diagonal or however you want with this method.