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');
});
});
Related
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!
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"
});
};
});
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?
I currently have a carousel slider which contains some text. When the user clicks the 'next' button the .carousel-text div sides up hiding the text, the carousel moves to the next slide then the .carousel-text on the next slide slides down to reveal the text.
This works fine some of the time but sometimes it will go wrong and the text will slide up and down before the carousel moves on. I'm assuming this is because the next button is clicked before the whole sequence has finished (the whole thing takes 2 seconds). Is there a way to make sure the whole thing is complete before it is called again?
jQuery("#arrow-right").click(function () {
jQuery('.carousel-text').animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').animate({
marginTop: "0px"
}, 500, function() {
// Animation complete.
});
});
});
}
EDIT: Just made a jsfiddle here: http://jsfiddle.net/UGE44/
Place a ".stop(true, true)" before you animate. This will stop the previous animations and allow the new ones to start all at the same time. Would look something like this:
jQuery('.carousel-text').stop(true, true).animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').stop(true, true).animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').stop(true, true).animate({
marginTop: "0px"
}, 500, function() {
// Animation complete.
});
});
});
Your may want to play around with which animates you place them before, as it may not need to be in all three spots.
Set "animating" flag before animate and clear it when animation is done.
jQuery("#arrow-right").click(function () {
var $text = jQuery('.carousel-text');
if ($text.data('animating') !== true) {
$text.data('animating', true)
.animate({
marginTop: "-260px"
}, 500, function() {
jQuery('.carousel-inner').animate({
marginLeft: "-700px"
}, 1000, function() {
jQuery('.carousel-text').animate({
marginTop: "0px"
}, 500, function() {
$text.data('animating', false);
// Animation complete.
});
});
});
}
}
This is my first time really trying to use jQuery for my personal portfolio and I'm having some problems with it. I want it to have a grid of small images (.piece) that when clicked slides to the left and presents a single large piece (#largeview). Then when you click (#largeview) it should slide away, and show (.piece) again!
See what I'm doing here.
The code works up to:
$("#largeview").click(function(){
$("#largeview").animate({
opacity: 0,
right: "-1000",
So I believe it's the .click that's not catching. Is there any reason for this? This is even with height/width defined in the CSS.
This is the whole block:
$(".piece").click(function(){
$(".piece").animate({
opacity: 0,
right: "+=1000",
}, 1000, function(){
$(".piece").hide();
$("#largeview").show();
$("#largeview").animate({
opacity: 1,
right: "0",
}, 500, function(){
$("#largeview .exit").fadeOut("slow");
$("#largeview").click(function(){
$("#largeview").animate({
opacity: 0,
right: "-1000",
}, 500, function(){
$("#largeview").hide();
$(".piece").show();
$(".piece").animate({
opacity: 1,
right: "0",
}, 1000, function(){
//done
});
});
});
});
});
});
Thank you to everyone!
The reason is that #largeview is not receiving the click event, it has a z-index of -1 in your CSS on your website. This means that the click event pops up to the its parent and never fires with a target of #largeview. If you change the z-index to 4 for instance, you'll notice that your page works correctly.
If you have a reason to keep #largeview with z-index: -1 in the CSS, change it when it gets popped in so that it will receive the click event.
Extra-tip: To check which element was the target of the click event, I added the following to your javascript and watched the page title as I clicked:
$('*').click(function (e) {
document.title = e.target.tagName + '#' + e.target.id + '.' + e.target.className;
});
Doe this work for you:
$(".piece").click(function(){
$(this).animate({
opacity: 0,
right: "+=1000",
}, 1000, function(){
$(this).hide();
$("#largeview").animate({
opacity: 1,
right: "0",
}, 500, function(){
$("#largeview .exit").fadeOut("slow");
}).show();
});
});
$("#largeview").click(function(){
$(this).animate({
opacity: 0,
right: "-1000",
}, 500, function(){
$(this).hide();
$(".piece").animate({
opacity: 1,
right: "0",
}, 1000, function(){
//done
}).show();
});
});
I think the problem is in the CSS. Having removed z-index: -1 from #largeview, I get all clicks captured. Try to either modify common.css (which is preferrable) or edit the code by Sudhir to (EDITED a bit):
var $pieces = $('.piece'),
$largeview = $('#largeview');
$pieces.click(function(){
$pieces.animate({
opacity: 0,
right: '-1000px',
}, 1000, function() {
$largeview.show()
.animate({
opacity: 1,
right: '0',
}, 500, function() {
$largeview.find('.exit').fadeOut('slow');
});
}).hide();
});
$largeview.click(function(){
$largeview.animate({
opacity: 0,
right: '1000px'
}, 500, function(){
$pieces.show()
.animate({
opacity: 1,
right: '0'
}, 1000);
})
.hide();
});