I have 2 animations curtain . The first animation work should be loaded as soon as the page , the second should work when you roll over the unit with a shutter and thus turn off the first animation . But I have run two animations at the same time until you will not deduce the cursor over the unit and will not return it back . What should I do?
function animationCurtain() {
$('.black_white').stop(true, true).animate({
width: "-=-100px"
}, 1200, function () {
$('.black_white').stop(true, true).animate({
width: "-=100px"
}, 1200, animationCurtain);
});
}
animationCurtain();
$(".before_after_slider").hover(function () {
$('.before_after_slider').mousemove(function (e) {
var offX = (e.offsetX || e.clientX - $black_white.offset().left);
$black_white.width(offX);
});
$('.before_after_slider').mouseleave(function (e) {
$black_white.stop().animate({
width: init_split
}, 100)
});
});
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 Jquery Collision to detect two objects overlapping each other. Here is a JSFiddle of the problem.
(apologies for including jquery collision script in HTML, couldn't find other way)
Click anywhere in the gray container to move the green div over the white div.
HTML Structure:
<div class="container">
<div class="test"></div>
<div class="menu"></div>
</div>
JS:
$(document).ready(function () {
var hit_list;
$(".container").click(function () {
$(".menu").stop().animate({
left: "+=100px"
}, 300, function () {
$(".menu").animate({
left: "0"
}, 800);
});
//Test for collision
hit_list = $(".menu").collision(".test");
if (hit_list.length != 0) {
alert("welcome Earthling!");
}
});
});
The problem with my method is that, it doesn't detect collision every time. Even though it passes over the white division fine, the alert isn't displayed everytime.
Am I going wrong anywhere in checking for collision? Is there a better/more efficient method to detect collisions during animation ?
jQuery animate has a step callback (https://api.jquery.com/animate/), it gets executed after each step of the animation.
Use it like this:
$(document).ready(function () {
var hit_list;
$(".container").click(function () {
$(".menu").stop().animate({
left: "+=100px"
}, {
duration: 300,
complete: function () {
$(".menu").animate({
left: "0"
}, 800);
},
step: function(){
//Test for collision
hit_list = $(".menu").collision(".test");
if (hit_list.length != 0) {
alert("welcome Earthling!");
}
}
});
});
});
Try this http://jsfiddle.net/aamir/y7PEp/6/
$(document).ready(function () {
var hit_list;
var hits=0;
$(".container").click(function () {
var $this = $(this);
function checkCollision() {
//Test for collision
hit_list = $(".menu").collision(".test");
if (hit_list.length != 0) {
hits++;
$(".menu").html(hits+ ' hits');
}
}
$(".menu").stop().animate({
left: "100px"
}, 300, function () {
checkCollision();
$(".menu").animate({
left: "0"
}, 800);
});
});
});
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)
);
});
I developed a simple jQuery animation first and later I create a jQuery function for reusability which will do the same thing. Here is a demo: http://jsfiddle.net/SpMns/
My code is working but not reliably so: when I click on the button to run the code, nothing happens; clicking it two or three times will start the animation. Why wouldn't it work the first time?
Please have a look at my routine and tell me which area I need to rectify:
jQuery.fn.busyToggle = function(ImgLoadSrc, marginBottom, opacity, speed,
easing, callback) {
var oDiv = $("<div id='BusyBox'><img src='" + ImgLoadSrc
+ "' alt='Loading...'/><div><em>Loading Wait...</em></div></div>");
if ($("#BusyBox").exists() == false) {
//alert('div not exist');
oDiv.css("background", "-moz-linear-gradient(center top , #F1F2F2 0%, #F1F2F2 100%) repeat scroll 0 0 transparent");
oDiv.css("border-top-left-radius", "5px");
oDiv.css("border-top-right-radius", "5px");
oDiv.css("bottom", "0px");
oDiv.css("font-size", "0.8em");
oDiv.css("font-style", "normal");
oDiv.css("font-weight", "normal");
oDiv.css("left", "50%");
oDiv.css("margin-left", "-45px");
oDiv.css("padding-top", "20px");
oDiv.css("position", "fixed");
oDiv.css("text-align", "center");
oDiv.css("width", "90px");
oDiv.css("height", "50px");
oDiv.css("margin-bottom", "-70px");
oDiv.css("background-repeat", "no-repeat");
oDiv.css("background-position", "center center");
oDiv.data('IsUp', 1)
oDiv.appendTo('body');
}
// i work with jquery data function for achieving toggle behaviour
if (oDiv.data('IsUp') == 1) {
oDiv.data('IsUp', 0);
return this.stop(true).animate({
marginBottom: marginBottom,
opacity: opacity
}, {
queue: false,
duration: speed,
complete: callback
});
}
else {
oDiv.data('IsUp', 1);
return this.stop(true).animate({
marginBottom: marginBottom,
opacity: opacity
}, {
queue: false,
duration: speed,
complete: callback
});
}
};
$(document).ready(function() {
$("#Process").click(function() {
if (flag == 1) {
$('#BusyBox').busyToggle('images/loader.gif', 0, 1, 500, 0, function() {
alert('div visible')
});
flag = 0;
}
else {
$('#BusyBox').busyToggle('images/loader.gif', -70, 0, 500, 0, function(){
alert('div hide')
});
flag = 1;
}
return false;
});
});
What could be causing this to fail the first time it's run?
The problem are is the this usage in the #busyToggle
On the first call $('#BusyBox') becomes an empty Array, which means that this (in #busyToggle) is also empty Array.
A better solution to your probelm would be to call busyToggle this way:
$('#Process').busyToggle('images/loader.gif', 0, 1, 500, 0, function() {
alert('div visible')
});
and use $('#BusyBox') instead of this in your function.
You can find all the code over there: http://jsfiddle.net/ubmCt/8/
P.S: I've also added following line to the ready function, otherwise it won't run in most browsers
var flag = 1;