I'm using jQuery code to animate a div from left to right on load, and then by clicking the close button the div hides from right to left. It's working fine, it's just not going left to right horizontally but diagonally. What am I doing wrong? Here's an example of the code I'm using http://jsfiddle.net/N8NpE/2/
$(function(){
$("#content-box").hide(0).delay(0).show(500);
});
$(function(){
$("#ClosePanel").click(function () {
$("#content-box").hide("slow");
});
});
Any help will be greatly appreciated.
You could try using .animate() instead of .hide() and .show(). This will give you a little more control over everything.
$("#content-box").animate({'width': 240},500);
And to close, include a callback function to set display to none after the animation:
$("#content-box").animate({'width': 0},500,function(){
$("#content-box").css('display','none');
});
http://jsfiddle.net/N8NpE/6/
You should include jQuery UI in your script and change your function a little bit:
$(function(){
$("#content-box").hide(0).delay(0).toggle('slide', {
direction: 'left'
}, 1000);
});
Here is an updated jsfiddle: http://jsfiddle.net/N8NpE/4/
$('#content-box').animate({width: 'toggle'});
http://jsfiddle.net/U7wGt/
Related
Hey guys I'm struggling to complete my sliding Nav bar. The problem now is I don't know how to change the tab images between sliding the bar out and back in (as seen in the picture). The image for folding it back in has to be inside the nav bar itself which is where I'm confused, could anyone help?
My link is here (with the help from Ketan) jsfiddle.net/6y90wkju/6/ (sorry have to copy and paste wont let me insert jsfiddle link without code)
Here's a picture...
You can do following way. You didn't include JQuery in your fiddle so it didn't work.
Give overflow:hidden; to #Maincontainer and also animate #slide with .hidden container.
$(document).ready(function(){
$('#slide').click(function(){
var hidden = $('.hidden');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-228px"}, "slow").removeClass('visible');
$('#slide').animate({"left":"0px"}, "slow");
} else {
hidden.animate({"left":"0px"}, "slow").addClass('visible');
$('#slide').animate({"left":"228px"}, "slow");
}
});
});
Check Fiddle Here.
Check out this solution
JS fiddle : http://jsfiddle.net/1dh4v5tj/2/
$(document).ready(function(){
$('#slide').click(function(){
var hidden = $('.hidden');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-180px"}, "slow").removeClass('visible').find("#slide").text("Show");
} else {
hidden.animate({"left":"0"}, "slow").addClass('visible').find("#slide").text("Hide");
}
});
});
I'm trying to make an image slidein on page load but it doesn't seem to work at all. The delay has no problem but the sliding effect doesn't do anything. Any help would be greatly appreciated.
$(function() {
$(".bgslide").one('load', function () {
$(this).delay(1000).show("slide", { direction: "left" }, 'linear', 2000);
}).each(function() {
if(this.complete) jQuery(this).load();
});
});
Here is a link to a jsfiddle as well: http://jsfiddle.net/cDYvh/
The slide effect comes with jQuery UI which you didn't include: http://jsfiddle.net/cDYvh/1/
You could also use $.animate() to avoid including jQuery UI. For example, you could accomplish your example with something like this:
$(this).animate({ left: 2000px });
Note: You'll probably need to apply position:absolute to the elements. Other items can be animated as well, including color, opacity, etc.
Animate Example
I'm trying to get a div #sidebar that rests above my main #stream div to move from position left: 565px; to position left: 0px; onClick of one image in the #sidebar div (the red arrow in the images below), and do the reverse onClick of the same image. I know I have to use JavaScript, but I have no idea what the code would be. If possible, I would like to animate the div move too.
The pre-clicked state (the arrow will be my link):
The post-clicked state:
Thanks in advance!
If you want to animate it using animate have a look at this. It should get you pointed in the right direction:
http://jsfiddle.net/3DpfJ/5/embedded/result/ - Full screen result
http://jsfiddle.net/3DpfJ/5/ - source code
So what I simply did was this:
$(function()
{
var expanded = false;
$('#sidebar').click(function()
{
if (!expanded)
{
$(this).animate({'left' : '0px'}, {duration : 400});
expanded = true;
}
else
{
$(this).animate({'left' : '565px'}, {duration: 400});
expanded = false;
}
});
});
This is probably the simplest way of doing it via animation. Duration is set to 400 so it will take 0.4 seconds to animate. Adjust as you please.
This script should be executed as soon as you load the page to ensure that the expand works. You will want to create <script type="text/javascript"></script> tag in the header and put the code there.
Hope it works for you.
$('#sidebar').click(function(){
$(this).animate({"left": "0"});
});
jquery uses toggle to handle this. It works better than a regular "animate" because it combines the hide and show into one function (toggle).
You might need to do some tweaking to fit your needs but this should get you started:http://jqueryui.com/toggle/
I created a fiddle
http://jsfiddle.net/gifcy/bJJ5s/5/
On DOM ready I hide the image.
I could successfully reveal the image from left to right using animate function.
Can someone show how to reveal from right to left. What additional parameters need to used.
Use jquery ui show() function
$(document).ready(function() {
$('#nature').hide();
$('#animation').click(function() {
$('#nature').show('slide', {direction: 'right'},1000);
});
});
fiddle here http://jsfiddle.net/bJJ5s/6/
Pretty sure this will work cross browser
#nature,
#nature img {
float:right;
}
http://jsfiddle.net/g8zDk/
how can I get this scroll back to the top neat thing from this link , just scroll down a bit, you'll see in the bottom right icon(top pointer) that scrolls back to the top on click. Thank you
In jQuery:
$(document).ready(function() {
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});
You can then make links like this:
Back to the top
You can find the script here:
http://www.javascriptkit.com/jkincludes/scrolltopcontrol.js
Although you need to use jquery for this script to work.