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.
Related
I have text content with a 'wipe'-like transition, using jQuery to animate element width. This works fine when anchored to the left, as width is removed from the right side.
See fiddle for simple example: https://jsfiddle.net/4jz7e0dw/5/
You can see in the fiddle, that when aligned left (red) the text stays still and the width animation trims it back from the right. This is good.
However, I now need this to work when aligned to the right.
If I align everything right, the text stays anchored to the left of its element, and width is removed from the right (blue text block in fiddle). This results in a sliding effect rather than the static 'wipe' effect I want. This is not good.
If I align to the right but use direction: rtl; (like the green example), the 'wipe' effect works correctly, but the content of the elements is reversed. This is not good.
How can I have text right aligned and get the width to remove from the left (making the 'wipe' effect instead of a slide), without reversing the content order? Basically I need the same effect as when aligned to the left (red), but mirrored (without mirroring content elements).
I was able to get the desired effect using a flex-box display.
Here is the fiddle: https://jsfiddle.net/4jz7e0dw/11/
By using direction: rtl in combination with flex-direction: row-reverse in the child, the list keeps the original order of elements.
A simple solution would be to put all of the content into a single <li> instead of seperate ones.
<div class="container slide-right rtl">
<ul id="target3" class="slide">
<li>CLICK THIS TO DEMO</li>
</ul>
</div>
If for whatever reason you do need multiple items, another solution would be to simply reverse the order of the elements in your HTML
Try adding this
.slide {
...
unicode-bidi: plaintext;
}
I forked a fiddle: https://jsfiddle.net/am87yhp9/
Is this the effect you want to achieve?
Manipulating the Margin property, and changing the direction from rtl -> ltr.
JQ:
jQuery('.slide').click(function(){
var width = this.clientWidth;
$(this).animate({ 'width': 0, "marginRight": width}, 1500);
});
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.
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 have a div (within #slideup there is a div with a div with PHOTOS) that I want "PHOTOS" to be positioned at the bottom, but when you hover over it it expands up and the header then goes to the top of the div. When your cursor then leaves the div, I would like "PHOTOS" to return back to the bottom.
Here is my feeble attempt. I can't seem to offset the header to where it is viewable. Any help would be greatly appreciated.
http://jsfiddle.net/JcBAd/2315/
$("#other-guy").hover(function () {
$("#slideup").slideToggle("fast");
});
Here is an example (kind of), http://www.barackobama.com/. In the right column, when you hover over "Immigration Reform" and you'll kind of see what I'm looking for. Only difference is I want the header to stick to the top.
You can use jQuery .animate() for example. Check this FIDDLE.
JS Code here:
$("#other-guy").hover(function () {
$("#slideup").stop().animate({'bottom' : 0}, 'fast'); /* open */
},
function(){
$("#slideup").stop().animate({'bottom' : -180}, 'fast'); /* close */
}
);
You are using Hover effect thats the reason your div is shown only when you place mouse over it
To use your code without that hover effect remove the javascript code and change your HTML to
<div id="other-guy">
<div style="background: #333; color: #FFF;">PHOTOS</div>
it will work.
and yup what is hover effect? just for your interest have a look
i'm having a problem using the scrolltofixed jquery plugin
https://github.com/bigspotteddog/ScrollToFixed
i use:
$('#tostick').scrollToFixed({ limit: $('#app-footer').offset().top - $('#tostick').height() - 20});
my #tostick is inside a
margin:0 auto
div container and as soon it hits the fixed footer and the script switches from fixed to absolute positioning it jumps out of the container because
left: 1107px
is applied, which is the distance to the left border of the browser window, instead of the left border of the centered div container. it tried to add:
offsetLeft: -$('#container').offset().left
which is completely ignored.
thanks in advance for any tip!
You need to give more info we don't know what #tostick is. Obviously we need the whole JS, and related html and css. Have you tried moving the entire container div it its only purpose is to have a style of margin:0 auto?
Also you can do:
$('#tostick').bind('unfixed', function() { $(this).css('left', ''); });//or what it needs to look right
$('#tostick').bind('fixed', function() { $(this).css('left', '1107px'); });//switch back to what it was