How to toggle between two functions in jquery? - javascript

I don't understand what's wrong with my code? I want to toggle between two functions in jQuery upon click. Thanks
$(".col-md-3").toggle(
function()
$(this).animate({
left: "-5px",
top:"-5px"
}, 100);,
function()
$(this).animate({
left: "5px",
top:"5px"
}, 100);
);

Your code appears to be incorrectly formatted e.g. no opening/closing braces etc.
Can you try this code?
$(".col-md-3").toggle(
function () {
$(this).animate({
left: "-5px",
top: "-5px"
}, 100);
},
function () {
$(this).animate({
left: "5px",
top: "5px"
}, 100);
}
);

Your function bodies need to be in { and }, it's not optional like it is with one line if statements, if that's what you were thinking.
$(".col-md-3").toggle(
function(){
$(this).animate({ left: "-5px", top:"-5px" }, 100);
},
function(){
$(this).animate({ left: "5px", top:"5px" }, 100);
}
);

Thanks for pointing out :) That's a silly mistake...
Once I've tried out I realised this is not exactly what I want. I initially want the object to animate once it was 'clicked' and animate back to the original state when 'click' again.
If I start with:
$('.col-md-3').on('click', boxMove);
function boxMove() {
$(this).animate({
left: "-5px",
top:"-5px"
}, 100);
};
It only animates one way. How could I add in the function that if the (this) is already animate it should move left "5px" and top "5px" to return to the original (unanimated) state?
Thank you so much in advance!

Related

Add cookies to toggle sidebar

I have a toggling sidebar on my side, and now I want to use cookies to make it remember what state it's at. This has been brought up a lot before, but I haven't been able to find a solution that works with my code. (Or maybe it does, but I'm really new at this, I could just have used it wrong.)
var main = function() {
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('body').animate({
left: "240px"
}, 200);
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-240px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
});
};
I looked into this ask, it seems to be what I'm looking for, but the codes where so different I didn't get it to work. Same with enter link description here Viktor's helpful setup here - would it be easier to just redo the code with something more "standard"? Or can I set up an if command for both the menu and the body?
Grateful for all tips. Cheers!
Download and include js-cookie, and use it as follows:
$(document).ready(function() {
$('.icon-menu').click(function() {
$('.menu').animate({
left: "0px"
}, 200);
$('body').animate({
left: "240px"
}, 200);
Cookies.set('menu-state', 'open');
});
$('.icon-close').click(function() {
$('.menu').animate({
left: "-240px"
}, 200);
$('body').animate({
left: "0px"
}, 200);
Cookies.set('menu-state', 'closed');
});
// Open menu (without animation) if it was open last time
if (Cookies.get('menu-state') === 'open') {
$('.menu').css({
left: "0px"
});
$('body').css({
left: "240px"
});
} else {
$('.menu').css({
left: "-240px"
});
$('body').css({
left: "0px"
});
};
});

Javascript load on page

I want that the title and subtitle shows up when the page loads. I tried several times to let it work but it won't.
jQuery(document).ready(function(){
jQuery('.element').bind('mouseover', function() {
jQuery(this).find('img').stop().each(function() {
jQuery(this).animate({
'opacity': 1
}, 200);
});
});
jQuery('.element').bind('mouseout', function() {
jQuery(this).find('img').stop().each(function() {
jQuery(this).animate({
'opacity': 0.4
}, 200);
});
});
jQuery('.element').on('pageload', function() {
jQuery(this).find('.title').stop().each(function() {
jQuery(this).animate({
'margin-left': 35,
'opacity': 1
}, 250);
});
jQuery(thi2s).find('.subtitle').stop().each(function() {
jQuery(this).animate({
'opacity': 1
}, 0);
jQuery(this).delay(150).animate({
'margin-left': 35
}, 250);
});
});
});
Can someone help me with this problem?
It's not entirely clear what you are trying to do, but at a first glance, I noticed this bug:
jQuery(thi2s).find('.subtitle').stop().each(function() {
// code
}
Obviously, the extraneous '2' should not be there, but I'm not sure if this small fix will create the intended behavior you are looking for.
Here's an example of how you should structure your code. You shouldn't really use the .bind() function for your events or reference elements using jQuery('.element'). Additionally the excessive use of this is unnecessary and complicates your code.
Consider this basic example:
$(document).ready(function () {
$("div").hover(
function () {
$("h2").animate({
left: 50,
opacity: 1
}, 500);
}, function () {
$("h2").animate({
left: 50,
opacity: 0.2
}, 500);
});
});
Check out this JSFiddle.
Hope this helps!

Don't know how to use .toggle()

I have a logo, with the letter T and H and the letters animatie about 400px away from each other when clicked on the menu. When they have animated the navigation comes forward with an: eas-in, BUT when I click on the hamburger-menu again, I want the navigation to close with the same animation. I have tried different .toggle() functions, but I don't know how to make it work. This is how it looks right now, I just cant figure out how to toggle the menu.
Is there anyone that knows how to do this, or is there anyone that has any advice? much appreciated!
(this is the working code for the animation and the fade-in navigation)
$( "#myMenu" ).click(function() {
$( ".letterT" ).animate({
marginLeft: "-200px",
borderWidth: "10px"
}, 1000 );
});
$( "#myMenu" ).click(function() {
$( ".letterH" ).animate({
marginLeft: "400px",
position: "absolute",
borderWidth: "10px"
}, 1000 );
});
$( "#myMenu" ).click(function() {
$( "nav" ).fadeIn( 2000)
});
The code above works once. with 1 click, now I tried to use the .toggle() but when I do so it immediately hides my menu with an animation.. And I can't find the menubutton anymore.
(This is the not working code that I tried to use for the toggle)
$(function(){
$('#myMenu').toggle(function(){
$( ".letterT" ).animate({
marginLeft: "-200px",
}, 1000 );
$( ".letterH" ).animate({
marginLeft: "400px",
position: "absolute",
}, 1000 );
//the code above should start the animation,
//and below it should animate back when I click on the menu
}, function(){
$( ".letterT" ).animate({
marginLeft: "200px",
}, 1000 );
$( ".letterH" ).animate({
marginLeft: "-400px",
position: "absolute",
}, 1000 );
});
});
Note: You load three times the jQuery library. You only need it once.
What you are trying to do is the "old" way toggle() used to work. You can read in the API description:
This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements.
Because you are using a version of jQuery newer than 1.8, the toggle() function only shows/hides an element.
You have several options: you could use a plugin, but I like Dom's solution which is using a variable to keep track of the state.
Your JavaScript code would become:
var oddClick = true; // <-- The variable to keep track of the state
$("#myMenu").click(function () {
if (oddClick) {h
$(".letterT").animate({
marginLeft: "-200px",
borderWidth: "10px"
}, 1000);
$(".letterH").animate({
marginLeft: "400px",
position: "absolute",
borderWidth: "10px"
}, 1000);
$("nav").fadeIn(2000);
}
else { // We put it back as it was before.
$(".letterT").animate({
marginLeft: "0",
}, 1000 );
$(".letterH").animate({
marginLeft: "-0.3em",
position: "absolute",
}, 1000 );
$("nav").fadeOut(500);
}
oddClick = !oddClick; // We toggle the variable everytime the button is clicked.
});
I created a jsFiddle to show you: http://jsfiddle.net/grd7z1g8/1/

Text animation from left and right in continuous loop using jquery

I want to animate text smoothly from left and right in continuous loop can anyone suggest me something here is the fiddle link:
http://jsfiddle.net/yLNGn/3/
$(document).ready(function () {
$('.kp').animate({
left: '10px'
}, 600);
$('.kp').delay(600).animate({
left: '-128px'
}, 600);
$('.rp').delay(2000).animate({
left: '10px'
}, 600);
$('.rp').delay(600).animate({
left: '-108px'
}, 600);
$('.kpp').delay(4000).animate({
left: '10px'
}, 600);
});
See Here is the answer. I make it as the seperate function with fiddle see here.
function repeat() {
$('.kp').animate({
left: '10px'
}, 600);
$('.kp').delay(600).animate({
left: '-128px'
}, 600);
$('.rp').delay(2000).animate({
left: '10px'
}, 600);
$('.rp').delay(600).animate({
left: '-108px'
}, 600);
$('.kpp').delay(4000).animate({
left: '10px'
}, 600);
$('.kpp').delay(600).animate({
left:'-108px'
},600 ,function() {
repeat();
});
}
Fiddle
Hopefully it may helps.
Well, you can use setInterval function, or if you make use of the complete callback of the jquery animate method:
$(document).ready(function () {
console.log('ready');
var james = $('#bond');
var right = function () {
james.animate({left: '100px'}, 600, left);
};
var left = function () {
james.animate({left: '0px'}, 600, right);
};
right();
});
this is the complete fiddle example: http://jsfiddle.net/yLNGn/32/
Have you considered using this jQuery plugin?

Why doesn't this simple toggle work?

Ok firstly - its not a toggle() as such.
This code is supposed to work like a slider. 1 Div is showing, you click a button, and the next div shows, click another button, and the first div shows.
This works so far, but it doesn't work going backwards. So the button works to show the 2nd Div, but hitting the 'less' button I made just makes the second div disappear and the 1st remains hidden.
Here is the code:
$('.more').click(function() {
$('.c1')
.animate({ left: "-828px" }, 600, 'easeInOutQuint')
.delay(300, function() {
$('.c2').animate({ left: "0px" }, 600, 'easeInOutQuint');
}
);
});
$('.less').click(function() {
$('.c2')
.animate({ left: "828px" }, 600, 'easeInOutQuint')
.delay(300, function(){
$('.c1').animate({ left: "0px" }, 600, 'easeInOutQuint');
}
);
});
What am I missing? And how could I do this so that I'm basically not repeating the same code twice?
have you tried with callback functions instead of delay ?
$('.more').click(function(){
$('.c1').animate({ left:"-828px"}, 600, 'easeInOutQuint',function(){
$('.c2').animate({left:"0px"}, 600, 'easeInOutQuint');
});
});
$('.less').click(function(){
$('.c2').animate({ left:"828px"}, 600, 'easeInOutQuint',function(){
$('.c1').animate({left:"0px"}, 600, 'easeInOutQuint');
});
});
You have a wrong concept about .delay.
In jquery documentation:
Description: Set a timer to delay execution of subsequent items in the queue.
And its parameters are: duration [, queueName].
Also, from SO answer:
The delay() function only applies to actions queued on the element
So I think your best choice is, as #nicolast said, use the callbacks. Here it is working. And the final code is:
$('.more').click(function() {
$('.c1')
.animate({ left: "-400px" }, 600, function() {
$('.c2').animate({ left: "0px" }, 600);
}
);
});
$('.less').click(function() {
$('.c2')
.animate({ left: "400px" }, 600, function(){
$('.c1').animate({ left: "0px" }, 600);
}
);
});
This reproduce works.
When pressing more: c1 goes to -100px and after that c2 goes to 0px
When pressing less: c2 goes to 100px and after that c1 goes to 0px
$('.more').click(function() {
$('.c1')
.stop()
.animate({ left: "-100px" }, 600, 'linear')
.delay(300, function() {
$('.c2').stop().animate({ left: "0px" }, 600, 'linear');
});
});
$('.less').click(function() {
$('.c2')
.stop()
.animate({ left: "100px" }, 600, 'linear')
.delay(300, function(){
$('.c1').stop().animate({ left: "0px" }, 600, 'linear');
});
});

Categories

Resources