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
Related
For this animation I use velocity.js and here is the code
$(document).ready(function() {
$('.shrink').on('click', function() {
$(".spread").removeClass("spread").addClass("shrink");
$(this).removeClass("shrink").addClass("spread");
$(".spread").velocity({
width: "80%"
}, 300);
$(".shrink").velocity({
width: "5%"
}, 300);
$('.spread').on('click', function() {
$(this).removeClass("spread").addClass("shrink");
$(".shrink").velocity({
width: "20%"
}, 300);
});
});
});
and the jsfiddle with full animation preview.
So, when you click on some column it opens and click again it closes. That is how it is supposed to work. But, the problem is if you now click again on the same column, it will open and close immediately, which is not the effect I want.
How can I fix this?
Btw, not sure why, but currently is not working in chrome, but it works in ff.
Learn about event delegation
simple rewrite of your code becomes
$(document).ready(function () {
$('body').on('click', '.spread', function () {
$(this).removeClass("spread").addClass("shrink");
$(".shrink").velocity({
width: "20%"
}, 300);
});
$('body').on('click', '.shrink', function () {
$(".spread").removeClass("spread").addClass("shrink");
$(this).removeClass("shrink").addClass("spread");
$(".spread").velocity({
width: "80%"
}, 300);
$(".shrink").velocity({
width: "5%"
}, 300);
});
});
DEMO
I am making a game like freaking-math using Phonegap and javascript.
I need to create similar timebar at the top. I use jQuery animate to animate the bar ... it works with the first answer only well .. then the second answer it starts but not exactly when the button is fired ..
how can I make it start just when the button fired and end too when it's fired again and end also after 3000ms if no answer were choosen ! ?
(function timeBar() {
$('.answer').on('touchstart', function(){
$('.progress').animate({ width: '0%' }, 3000)
$('.progress').animate({ width: '100%' }, 0);
});
})();
I have tried :
(function timeBar() {
$('.answer').on('touchstart', function(){
$('.progress').animate({ width: '0%' }, 3000);
});
$('.answer').on('touchend', function(){
$('.progress').animate({ width: '100%' }, 0);
});
})();
But not working :( !!
Here's one solution, given that you reload the page for every new math-question:
http://jsfiddle.net/daxro/uLd49zmp/1/
$(document).ready(function() {
$("#bar").animate({
width: '0%'
}, 3000);
});
...and here's another solution which includes a button: http://jsfiddle.net/daxro/uLd49zmp/3/
I'm learning new stuff with jQuery here and I have seen a effect that I like link here
Meet my Team section. As you can see if you scroll down the circle slidesup and fades in at the same time. I tried to replicate that effect. Here's my jsfiddle
$(window).on("scroll", function() {
if ($(window).scrollTop() >= $('#thumbnails-cont').offset().top-$(window).height()) {
$("#thumbnails img").animate({opacity: 1, bottom: 0})
}
});
You have to work with the queue property to play animations simultaneously.
Working fiddle: Here
Basic code:
$(function() {
$(".thumbnail").animate({ opacity: 1 }, { duration: 1200, queue: false });
$(".thumbnail").animate({ "margin-top": "0px" }, { duration: 1200, queue: false });
});
Read this for more information about the animation function in jQuery.
I hope I could help you a bit :)
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.
});
});
});
}
}
I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?
Just in case this helps, the link to previous topic is: How to make jQuery animate upwards
Any help is appreciated.
Here is a sample demo
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
HTML:
<button id=slideToggle>slide</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>
$(document).ready(function() {
var isClicked = false; //assuming its closed but its just logic
$('.button').click(function() {
if (isClicked) {
isClicked = true;
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
}
else
{
isClicked = false;
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
}
});
});
This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass
.toggleClass('animateUpwards)
Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.
Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example
or from the questions you posted, perhaps this is what you meant:
http://jsbin.com/ogaje
Clicking the (visible part of) the div
$(document).ready(function() {
$('.featureBox').toggle(function() {
$(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $(this).slideUp()
},
function() {
$(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $(this).slideDown()
});
});
Clicking something else
$(document).ready(function() {
$("#button").toggle(function() {
$("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideUp()
},
function() {
$("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideDown()
});
});