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);
});
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 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.
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();
}
}
});
});
How would i add jQuery's UI Bounce feature to this script? The script currently slides out a progress bar to a set position. I would like that when it reaches the position it bounces back and forth a few times and then rests.
I tried a few previous stack overflow answers but none of them work.
$(function () {
$(".meter .bar").each(function () {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 900);
});
});
Try the following. It uses an object after the CSS mods in animate() to set the properties.
You can use bounce just change the direction in options.
$(function () {
$(".meter .bar").each(function () {
$(this).data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 700)
.effect('bounce', {times: 3,
direction: "right",
distance: 10}
, 700);
});
});
Demo: jsFiddle
It is a hack, check whether it is acceptable.
Because in order to use the bounce animation we need to call show on a hidden item, check whether the blinking effect is acceptable, then you can use it.
Try using the animate callback
$(function() {
$(".meter .bar").each(function() {
$(this).data("origWidth", $(this).width()).width(0)
.animate({
width : $(this).data("origWidth")
}, 900, function(){
$(this).effect("bounce", {
times:3,
direction: 'right'
});
});
});
});
Demo: Plunker
Demo: Effect
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)
);
});