Don't know how to use .toggle() - javascript

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/

Related

How to toggle between two functions in jquery?

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!

Jquery on click show mouseleave hide sidebar

Hi i need some with the this script i manage to show the panel with the mouseclick but i wanted when my mouse leave the panel it will close it
this is the sample http://jsfiddle.net/jikey/w9s7pt25/
$(function(){
$('.slider-arrow').click(function(){
if($(this).hasClass('show'))
{
$( ".slider-arrow, .spanel" ).animate({
right: "+=182"
}, 700, function() {
// Animation complete.
});
$(this).html('<img src="images/sideclose.png" />').removeClass('show').addClass('hide');
}
else
{
$( ".slider-arrow, .spanel" ).animate({
right: "-=182"
}, 700, function() {
// Animation complete.
});
$(this).html('<img src="images/sideopen.png" />').removeClass('hide').addClass('show');
}
});
});
Here you need to write 2 methods.
jQuery click to display the section on clicking on the arrow and jQuery onmouseleave to hide the section on coming out of the section.
I suggest you to display the slideopen.png and slideclose.png files in the (background style) CSS with respect to the classes.
Method 1: on click
jQuery Code:
$('.slider-arrow').on("click", function(){
if($(this).hasClass('show')){
$( ".slider-arrow, .panel" ).animate({
right: "+=300"
}, 700, function() {
// Animation complete.
}); $(this).html('«').removeClass('show').addClass('hide');
}
});
Method 2: on mouse leave
jQuery Code:
$(".panel").on("mouseleave", function(){
if(!$('.slider-arrow.show').hasClass('show')) {
$( ".slider-arrow, .panel" ).animate({
right: "-=300"
}, 700, function() {
// Animation complete.
});
$(".slider-arrow").removeClass('hide').addClass('show');
}
});
Demo link: http://jsfiddle.net/w9s7pt25/7/
What you can do is add a seperate mouseout function as illustrated in this jsfiddle. The problem with your code was that the mouseover event only acts on .slider-arrow once, changes the class to hide and then expects another mouseover to read that it needs to be hidden.
$(function () {
$('.slider-arrow').mouseover(function () {
if ($(this).hasClass('show')) {
$(".slider-arrow, .panel").animate({
right: "+=300"
}, 700, function () {
// Animation complete.
});
$(this).html('«').removeClass('show').addClass('hide');
}
});
$('.panel').mouseout(function () {
if ($('.slider-arrow').hasClass('hide')) {
$(".slider-arrow, .panel").animate({
right: "-=300"
}, 700, function () {
// Animation complete.
});
$('.slider-arrow').html('»').removeClass('hide').addClass('show');
}
});
});
Hope it makes sense.
You can use mouseout or mouseleave. I guess you would add some elements in panel. So mouseout fires when the pointer moves out of child element as well, while mouseleave fires only when the pointer moves out of the bound element
$('.panel').mouseleave(function() {
if($('.slider-arrow').hasClass('hide')){
$( ".slider-arrow, .panel" ).animate({
right: "-=300"
}, 700);
$('.slider-arrow').html('&raquo').removeClass('hide').addClass('show');
}
});
You can attach the jquery .mouseleave() function on the panel and let it execute only when the panel is visible also add a class like 'visible' to keep state of the visibility of your panel like so: http://jsfiddle.net/gakuru/d2qnrm2x/
$('.panel').on('mouseleave',function(){
if($(this).hasClass('visible')){
$( ".slider-arrow, .panel" ).animate({
right: "-=300"
}, 700, function() {
// Animation complete.
});
$('.slider-arrow').html('»').removeClass('hide').addClass('show');
$('.panel').removeClass('visible');
}
});

folding menu with jquery not working

Hello I used to use this piece of code to fold and unfold the menu in my website with jquery 1.8.3 but after updating this to >1.10.2 it hides the menu automatically again. I think this is because it goes through all the code. How can I change this to work with the new update? ( sorry for my lack of javascript )
$(document).ready(function() {
$('#menu-button').toggle(function() {
$('#menu').animate({
marginTop: '+=10',
height: '100%',
opacity: 1
}, 300, function() {
// Animation complete.
});
}, function() {
$('#menu').animate({
marginTop: '-=10',
opacity: 0,
height: '0px'
}, 300, function() {
// Animation complete.
});
});
});
click here for a working example of how it is now.
Just rewrite it with toggleClass();
Here is working jsbin : http://jsbin.com/razeguma/4/edit

How to bind mouseover event after unbinding it?

I'm trying to get a nice animation with jQuery. I came up with that code:
$(document).ready(function () {
$('#arrow_up').hide();
$('#arrow_down').bind({
mouseenter: function() {
$('#content')
.animate({
height: '110px'},
300);
},
mouseleave: function() {
$('#content')
.animate({
height: '100px'},
300);
}})
.click(function() {
$(this)
.fadeOut( 1000 )
.unbind('mouseenter')
.unbind('mouseleave');
$('#content')
.animate({
height: '300px'},
500);
$('#arrow_up')
.delay(1000)
.fadeIn( 2000 );
});
$('#arrow_up').bind({
mouseenter: function() {
$('#content')
.animate({
height: '290px'},
300);
},
mouseleave: function() {
$('#content')
.animate({
height: '300px'},
300);
}})
.click(function() {
$(this)
.fadeOut( 1000 )
.unbind('mouseenter')
.unbind('mouseleave');
$('#content')
.animate({
height: '100px'},
500);
$('#arrow_down')
.delay(1000)
.fadeIn( 2000 );
});
});
It is working nicely, but only the first time. You can check it here: http://www.cow-art.eu/test/index.html
I want to animate the content div on hovering an arrow below. After clicking it I want to slide it down to full size and after the next click - to hide it partially. You can check it on the link provided above. It's working fine, but the arrow hovering animation is working unless I show and hide the content. The second approach is not animating it as the first.
I assume it's because the clicking event is unbinding the mouseenter and mouseleave, and there is no other event what can bind it again.
I ran out of ideas how to fix it. Can you please help me with that one?

marginLeft as a Javascript variable

I'm trying to animate a 'div' in the mobile version of my website.
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "15px"
}, 500 );
}
});
When the 'div' wil change position I'd like to be able to tap once again on it and let it return to its default position.
I tried to create an 'if' statement...but I can't understand why it doesn't work.
I'd like assume the 'marginLeft' of my 'div' as a variable for my javascript code in order to move it to the right if 'marginLeft=10px' and move it to the left (default position) if the "new" 'marginLeft is not equal to 10px anymore.
I've tried with the following code:
var x = ("#iconReorder").style.marginLeft;
if (x = "10px") {
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "15px"
}, 500 );
}
});
} else {
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "10px"
}, 1000 );
}
});
}
Can somebody help me?
I hope that what I said is understandable.
Thank you
So if I understood correctly, this should do:
var x = $("#iconReorder");
x.on('tap', function () {
var to = '10px', time = 1000;
if (x.css('margin-left') === '10px') {
to = '15px';
time = 500;
}
x.animate({
marginLeft: to
}, time);
});
or in action. I replaced tap event with click so that I could see what I'm doing. Anyway it should work better now.
There might be some slimmer way to make it work, but I can't think of any at the moment (maybe some toggle method).
try this
$( "#iconReorder" ).animate({
'margin-left': 15
}, 500 );

Categories

Resources