I am currently learning jQuery. I'd like to know how to make an image slide in when you click on its edge, then click again and it slides away. Similar to this:
http://www.karenmillen.com/
If you see the right hand side and click, there is the effect that i'm looking for. I assume this will involve making a div and giving it a background image then using some jquery to make the div slide into view. Of course the div could have other content such as html. Any ideas?
Would the .slideDown() method work?
if you want a div to slideDown() first it has to hidden.
so use $("#div_Id").hide();
after that use $("#div_Id").slideDown('slow');
this will work
Check out slideToggle
Here's what i have so far:
$(document).ready(function() {
$('.inner').hide();
$("button").click(function() {
$("#static_image").hide();
$('.inner').slideToggle(300);
});
});
So basically the animated div begins hidden. There's another div with a background image that is lined up to look as if the animated div is still sticking out a bit. Then clicking a button makes the static div dissapear and the animated div slide into view. However i'm not sure how to make the timing perfect so it's smooth and people won't know there are two divs. The animated div takes a fraction of a second to move up to where the div with the static image was, however the static images disappears immediately leaving a non-smooth animation.
One other thing, how do i get the static image div to return at the moment that the animated div moves back down after a user click? It can't be at the exact moment the user clicks 'retract' button else it'd definitely appear before it's supposed to.
In order to use the animate() function add a CSS class to the <div> tag that has a height attribute, it can either be in pixels or %, this will be the initial height. After that then you can use the animate().
$('#mydiv').animate({
height: 500px
}, 5000, function() {
// Animation complete.
});
This will slide the div to 500px, which will take 5 seconds.
Related
I'm trying to create a Javascript effect I'm sure I've seen done many times before. However, I can't seem to find the right terminology for it. It's not a "slider", or a "slide out menu" or a "slide out tab" or a "tab". So far those terms have caused Google to take me to all sorts of examples and tutorials for things that are not what I'm after.
The effect I'm after is like this:
Div 2 sits behind Div 1 until the user mouses over the visible portion of Div 2, which causes it to slide out to reveal more of itself. When the user mouses away, Div 2 slides back underneath Div 1.
What do you call this effect, so that I can find turorials or Javascript code for it? Or if anyone can direct me to an example or explain how to do it, that would be great.
I'm sorry for a terrible code, but do you need something like this?
http://jsfiddle.net/D7Z8v/
$("#smalldiv").hover(function() {
$("#smalldiv").animate({marginLeft: 200});
}, function() {
$("#smalldiv").animate({marginLeft: 0});
});
You probably need to change "marginLeft" inside hover function on something more appropriate, but it's looks like what you needed.
You can use z-index to have div1 above div2 and then you can either use a CSS animation, jQuery animation to change the position of div2 or you can adjust the width of div2.
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 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've been looking around for answers and everything I apply to my own code doesn't seem to work. I have a DIV with content. When I click on a link the DIV fades out, the content changes via the jQuery .html event and then the DIV fades back in. This gives the illusion of a gentle page change on my site. This DIV has a jScrollPane which works fine before any links are pressed.
What is happening however is that the scroll pane 'draggable area' stays the same size when the content is re-written and there is more or less, or even if there is no need for one at all.
I need to get the scroll pane 'draggable area' to change size in relation to the new content and I need it to scroll back to the top inbetween the .fadeTo fade out and in effect.
I've tried some of the following:
function showhome() {
$('#infohome').stop(true,true).fadeTo(100,0)
$('#infohome').delay(100).html("NEW CONTENT")
$('#infohome').stop(true,true).delay(200).fadeTo(100,1)
refreshNav();
function refreshNav() {
var element = $('.scroll-pane').jScrollPane({scrollToY(0, animate)});
var api = element.data('jsp');
}
As well as:
myJScrollPane.getVerticalScrollbar().setValue(int Pos);
and a few others.
As always, any help would be greatly appreciated.