Basically I want the header and footer to remain in their positions but the three (inline-block elements) in the center to slide in from the right side when page loads. You can see what I am trying to achieve on this example page:
http://flooring-by-design.com
Here is my website where I want to achieve this same effect:http://contestlancer.com/davidicus/
As you can see it is twitter boot strap site. So the three divs which I want to slide in are inline-block elements with class="span4" and unique id. I tried this but it doesn't work on the page for some reason.
$("#portfolio").animate({left: "0"}, {
duration: 2000
});
$("#music").animate({left: "0"}, {
duration: 1000
});
$("#blog").animate({left: "0"}, {
duration: 500
});
Regards
Ahmar
How about this?
$('#portfolio').click(function(e) {
e.preventDefault();
$('#portfolio').animate({
'right' : '100px'
}, 2000);
});
Related
I'm having a problem where I'm making a function in JavaScript (JQuery):
$('.login').click( function() {
$('#login-container').animate({
left: 0
}, 300, "swing", function(){
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
});
Whereas "login" is a button and login-container is a big div which contains a form which people can use to login.
I'm trying to make the giant container that slides over the page only turn its background color to lower the website's exposure but it's working and as far as I know, the code is correct.
The first animation happens but the second one (referring to the backgroundColor) doesn't even start at all.
Thanks in advance
EDIT:
I've simplified my code to see if it was a problem of my syntax or JS simply not applying this animation:
$('.login').click( function() {
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
And the element does not have its background-color applied, for some reason.
I don't actually get what you're trying to say here, but if you want to toggle that animation you can use $.toggle() of jquery after the user clicks.
If you want to animate this stuff, look at this documentation provided by jQuery
jQuery Animation
I have some functionality on my web page to hide or show the side-menu. I have two divs, #collapse-side-nav, and #expand-side-nav. The way it is set up right now is that by default #expand-side-nav's style is set to display:none; . Then when the user clicks on the collapse-side-nav id the side-nav collapses and then #expand-side-nav gets displayed.
I noticed that the new #expand-side-nav's positioning needs to be further to the right and a little bit higher than #collapse-side-nav's div, and I wanted to achieve this with animations so that it looks sleek. My code is below. However, when I test this out in the browser the animation only works once.
$('#collapse-side-nav').click(function() {
$('.side-nav').toggle(300);
$('#collapse-side-nav').css('display', 'none');
$('#expand-side-nav').css('display', 'inherit');
$('#expand-side-nav').animate({
'margin-left' : 34,
'margin-top' : 2
}, "slow");
$('.container').animate({
'padding-left' : 0
}, "slow");
});
$('#expand-side-nav').click(function() {
$('.side-nav').toggle(325);
$('#expand-side-nav').css('display', 'none');
$('#collapse-side-nav').css('display', 'inherit');
$('.container').animate({
'padding-left' : 200
}, "slow");
});
EDIT:
I will try and post a fiddle later today. I also tried incrimenting rather than declaring exact pixels (jQuery- animate() only works once)
However this increments each and every time meaning the css will keep getting pushed further and further to the right every single time the user clicks on the div.
I have four images on a page and when I hover over the image, I want a horizontal div to move up on the bar, and when the mouse pointer moves off of the image, I want it to slide back down. Now when I do this is works fine, however there seems to be a delay. Also, if I move back and forth repeatedly, the delay is more and the slider ends up going up and down on its own for a few seconds. Here is the code, please help!
$('.indexgall').on('mouseenter',function()
{
$(this).addClass('hoverimg');
$(this).children().animate(
{
top: 150
}, 600, function()
{
});
});
$('li').on('mouseleave',function()
{
$(this).removeClass('hoverimg');
$(this).children().animate(
{
top:250,
}, 600, function()
{
});
});
From your code, it doesn't look there should be a delay. Can you post a JSFiddle to show this problem in action?
To address the latter concern, you want to be using the JQuery stop() method to stop the animation by cleaning the animation queue.
This can be done, like so:
$(this).stop().animate({
width: 240
}, 500);
Check out this JSFiddle.
I'm trying to create a select state using two div's positioned on top each other. One is positioned relatively and one is positioned absolutely with a bottom position of -200px. On Click of the relative div, the absolutely positioned div will slide in with a message of "success".
I have this working right now, but I need to go a little more in depth by removing the "success" div if the user decides that they want to change their selection. Also right now, when I click one div, all the divs show the "success" state. I want to fix this without touching the html/css.
Here is the JS fiddle.
http://jsfiddle.net/LSan3/
$(document).ready(function(){
$('.main-div').click(function(){
$('.inner-div').animate({
bottom: "0px"
}, 300 );
});
});
Thanks !
I think this is what you want:
$(document).ready(function(){
$('.main-div').click(function(){
$('.inner-div').stop().animate({
bottom: "-100px"
}, 300 );
$(this).find('.inner-div').stop().animate({
bottom: "0px"
}, 300 );
});
});
http://jsfiddle.net/LSan3/3/
So in the click function we first hide all 'inner-divs' then find and show the one relative to 'this' - 'this' being the 'main-div' that was clicked.
Let me know if this is what you wanted to achieve.
EDIT: Also note I have added .stop() which will make sure your animation doesnt repeat multiple times if they user clicks the 'main-div' rapidly
Try:
$(document).ready(function () {
$('.main-div').click(function () {
$('.inner-div').animate({
bottom: "-100px"
}, 0);
$(this).find('.inner-div').animate({
bottom: "0px"
}, 300);
});
});
jsFiddle example
try the code given below:
$(document).ready(function(){
$('.main-div').click(function(){
$('.inner-div').animate({bottom: "-1-0px"}, 300 );
$(this).find('.inner-div').animate({
bottom: "0px"
}, 300 );
});
});
I think this may help you.
I have built and uploaded this site here for a client. I used the Twitter bootstrap and customized it. My issue is the navigation it has jquery to animate the links. However i want this to disable and revert to an vertical list when screen size drops to phone size.
I know bootstrap already has the media queries built in but how do i do this.
Check the site and shrink browser to mobile size and you will see the list button appears but the links are still the same inside.
Not sure if i have made my point very clearly but more more info please ask.
Thanks
Here is the code responsible for animation:
$(document).ready(function () {
//When mouse rolls over
$(".blue").mouseover(function () {
$(this).stop().animate({
height: '100px'
}, {
queue: false,
duration: 1200,
easing: 'easeOutBounce'
})
});
//When mouse is removed
$(".blue").mouseout(function () {
$(this).stop().animate({
height: '50px'
}, {
queue: false,
duration: 1200,
easing: 'easeOutBounce'
})
});
});
Try matchMedia() to apply an animation only on small viewports:
if (window.matchMedia("(max-width: 480px)").matches) {
/* do animation here */
}
Of course you can change 480px to whatever you want or even check for other properties.