I need to link jQuery toggle and animate functions together. When i click on the box, its size should change. My codes js fiddles snip is here. Why doesn't it work? It disappears on startup.
JS Fiddle snip
$(document).ready(function() {
$('.adiv').toggle(
function(){
$(this).animate({
width: "150",
height: "150",
}, 1000);
},
function(){
$(this).animate({
width: "77",
height: "77",
}, 1000);
});
});
Toggle will hide/show you element so because your element is visible at initial load the first time your toggle function is called it will animate but then the toggle will set a display none on the element causing it to hide. You should not use the toggle function for this.
You should use something like this:
$(document).ready(function() {
var big = false;
$('.adiv').on('click', function(){
if( big ) {
$(this).animate({
width: "77",
height: "77",
}, 1000);
} else {
$(this).animate({
width: "150",
height: "150",
}, 1000);
}
big = !big;
});
});
Here is a working example: http://jsfiddle.net/x7f34vr5/1/
You need to assign a click handler, or it will just run right away. eg.
$('.adiv').click( function () {
// Do stuff here
});
Toggle and animate don't really go together - here's a different way of doing it:
$(document).ready(function () {
$('.adiv').click( function () {
var newSize = $(this).width() > 77 ? 77 : 150;
$(this).animate({
width: newSize,
height: newSize,
}, 1000);
});
});
Fiddle here.
Related
I'm trying to create this portfolio page where there are 2 columns of images. On hover the image zooms and the next image is pushed away to reveal a caption.
I am new to javascript and I have it working but it is crashing my page after a few minutes of running. I'm sure this is not written in the best manner. anyone have feedback?
function portImage() {
$('.slide').mouseenter(
function() {
var imgResize = $(this).children('.slide-image').children('img');
var current_h = $(this).children('.slide-image').children('img').height();
var current_w = $(this).children('.slide-image').children('img').width();
$(imgResize).addClass('active');
$(imgResize).clone().insertAfter($(imgResize)).addClass('clone');
$(this).find('.active').removeClass('active');
$(this).find('.clone').filter(':not(:animated)').animate({
width: (current_w * 1.3),
height: (current_h * 1.3)
}, {queue: false, duration: 300});
}).mouseleave(
function() {
var imgResize = $(this).children('.slide-image').children('img');
var current_h = $(this).children('.slide-image').children('img').height();
var current_w = $(this).children('.slide-image').children('img').width();
$(this).find('.clone').filter(':not(:animated)').animate({
width: (current_w + 'px'),
height: (current_h + 'px')
}, {queue: false, duration: 300});
});
};
function leftSlide() {
$('.slide.left').hover(
function(){
$(this).next('.slide.right').animate({
right: "-25%"
}, 500);
$(this).children('.slide-caption').animate({
right: "-50%"
}, 500);
},
function(){
$(this).next('.slide.right').animate({
right: "0"
}, 500);
$(this).children('.slide-caption').animate({
right: "0"
}, 500);
});
};
function rightSlide() {
$('.slide.right').hover(
function(){
$(this).prev('.slide.left').animate({
left: "-25%"
}, 500);
$(this).children('.slide-caption').animate({
left: "-50%"
}, 500);
},
function(){
$(this).prev('.slide.left').animate({
left: "0"
}, 500);
$(this).children('.slide-caption').animate({
left: "0"
}, 500);
});
};
portImage();
rightSlide();
leftSlide();
I have it set up on jsfiddle:
https://jsfiddle.net/cuestadesign/jej9xrfq/
This is a result of your .clone() function in the mouseenter event handler of the portImage() function.
You are setting var imgResize to all the children imges of $(this).children('.slide-image'). The first time around this only grabs the one image. However, you then clone that image and add it as a sibling to that image. The next time around, your function will assign both images to var imgResize and clone them both/animate them both, etc...
This results in exponential growth of images being cloned and animated, resulting in a page crash after only a few iterations.
The solution? As far as I can tell, just removing the clone after it's been animated up and back down solves everything:
$(this).remove();
That would go in a callback function of the .animate() function in the mouseleave event handler of your portImage() function, like so:
$(this).find('.clone').filter(':not(:animated)').animate({
width: (current_w + 'px'),
height: (current_h + 'px')
}, {queue: false, duration: 300, complete: function() {
$(this).remove();
}
});
You may also want to change assignment of imgResize to not include items with a class of .clone:
var imgResize = $(this).children('.slide-image').children('img:not(.clone)');
JSFiddle Here
I am using the following functions to grow the text box and display the submit button on focus and shrink and hide the button on blur.
But the button shows and hides before the animation is complete.
I am looking to create a neat slide down and slide up animation.
$('#venue-write-review').focus(function() {
$(this).animate({ height: '96px' }, 500);
$('#submit-review').show();
});
$('#venue-write-review').blur(function() {
$(this).animate({ height: '48px' }, 500);
$('#submit-review').hide();
});
You can specify a callback to the animate function to be executed once the animation is done.
$('#venue-write-review')
.focus(function() {
$(this).animate({ height: '96px' }, 500, function () {
$('#submit-review').show();
});
})
.blur(function() {
$(this).animate({ height: '48px' }, 500, function () {
$('#submit-review').hide();
});
});
This is all you need And don't forget to use .stop()!
$('#venue-write-review').on('focus blur',function(e){
$(this).stop().animate({ height: e.type[0]=="f"?96:48 }, 500, function(){
$('#submit-review').toggle();
});
});
e.type[0]=="f" ij just to check in a Conditional Operator (?:) if the passed event's first [0] character is f (focus; else logically it's blur)
Read the jQuery docs about the methods: .on(), .toggle(), stop() .animate() callback and on the MDN website read about Conditional operator
Also in jQuery if you don't need to animate by % or some other measure, you don't need to specify 'px' cause it's default.
You can use complete callback. Check the docs (under options section):
A function to call once the animation is complete.
Like this:
$('#venue-write-review').focus(function() {
$(this).animate({
height: '96px'
},
{
duration: 500,
complete: function() {
$('#submit-review').show();
}
}
});
});
$('#venue-write-review').blur(function() {
$(this).animate({
height: '48px'
},
{
duration: 500,
complete: function() {
$('#submit-review').hide();
}
}
});
});
I'm using the animate function in jQuery to re-size a content area when the user hovers over the element.
The script works fine but I cant work out how to stop the script from resizing more than once if the element is hovered over more than once.
I have created a jsfiddle here I have also added the js I used.
var minheight = $('.section-fade').css("height");
$('.section-fade').hover(
function () {
$(this).animate({
height: $('.childsection').height()
}, 1000);
},
function () {
$(this).animate({
height: minheight
}, 1000);
});
Any ideas would be very much welcomed.
Cheers
What you're looking for is .stop().
.stop() will cancel all animations on an object.
http://jsfiddle.net/zxm9S/1/
var minheight = $('.section-fade').css("height");
$('.section-fade').hover(
function () {
$(this).stop().animate({
height: $('.childsection').height()
}, 1000);
},
function () {
$(this).stop().animate({
height: minheight
}, 1000);
});
Why will this code not work as an onclick ?
$('.mainz11').click (function() {
$(this).animate({
height: '280px'
}, 800);
}, function() {
$(this).animate({
height: '100px'
}, 800);
});
If you're trying to first expand the element and then contract it, it should probably be something like this:
$('.mainz11').click(function() {
// determine target heights
if ($(this).hasClass("expanded")) {
var targetHeight = 100;
} else {
var targetHeight = 280;
}
// animate
$(this).animate({
height: targetHeight
}, {
duration: 800,
complete: function() { $(this).toggleClass("expanded"); }
});
});
This could use some cleaning up, but it does the trick, and you can track expanded items easily this way.
See here: http://jsfiddle.net/mpQek/3/
The click function takes only a single function but you are passing 2 functions to it. You can try it this way:
$('.mainz11').click (function() {
$(this).animate({
height: '280px'
}, 800);
});
If you want to chain animations, put the next animation as the function to run on complete of the first animation:
http://api.jquery.com/animate/
$('.mainz11').click (function() {
$(this).animate({ height: '280px', 800,
function() { $('.mainz11').animate({ height: '100px'}, 800)
);
});
Okay, so here is my script.
When you click on a learn more button, it corresponds to that particular box and pulls down the right information accordingly.
I want to add a feature so when you click on ANOTHER learn more, and there is already a div open with information, it closes itself like the tail end of the toggle in this script.
Essentially, I don't want to have two learn more's open at the same time. If you choose one, then all the rest of them are closed. The way the page is setup, I can only have one open at a time.
$(document).ready(function(){
var service = $(".service"), text = $(".service-text, h1.service-heading"), moretext = $(".more-text");
$(".learn").toggle(
function()
{
$(this).parent().find(service).animate({ backgroundColor : "#000000" }, 800);
$(this).animate({ backgroundColor : "#FFFFFF" }, 800);
$(this).parent().find(text).animate({ color: "#FFF"}, 800);
$(this).parent().find("span.more").animate({ color : "#000000" }, 800, function () {
$(this).parent().parent().find(".service").animate({ height : "500px"}, 800, function () {
$(this).find(moretext).show().animate({ color: "#FFFFFF"}, 800);
$(this).parent().find("span.more").animate({ color : "#FFF"}, 800, function () {
$(this).hide();
$(this).parent().find("span.less").show( function () {
$(this).animate({ color: "#000000"}, 800);
});
});
});
});
},
function()
{
$(this).parent().find(service).animate({ backgroundColor : "#FFFFFF" }, 800, function () {
$(moretext).animate({ color: "#FFFFFF"}, 800, function () {
$(this).hide();
});
});
$(this).animate({ backgroundColor : "#000000" }, 800);
$(this).parent().find(text).animate({ color: "#000000"}, 800);
$(this).parent().find("span.less").animate({ color: "#FFFFFF"}, 800, function() {
$(this).parent().parent().find(service).animate({ height: "180px"}, 800, function () {
$(this).parent().find("span.less").animate({ color: "#000000"}, 800, function () {
$(this).hide();
$(this).parent().find("span.more").show( function () {
$(this).animate({ color: "#FFFFFF"}, 800);
});
});
});
});
});
});
you can make it this way
$(".learn").click(function(){
$(".learn").not(this).doSomeThing(/* some code */);
});
by this code you can exclude the current clicked item from the set
Pseudo code:
Give all the relavent divs a special class name
Separate your "close" function in the tail end of toggle out into a separate function, make it so it doesn't close divs with a class of "active"
Setup a listener for clicking on learn mores that add the class "active" to the thing clicked then calls that close function for all (other) divs before doing its thing