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);
});
});
});
Related
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)
});
});
I want to stop setInterval() when left margin is 1200px.
My code is :-
<html>
<body>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
$('#btn').click(function () {
var i = setInterval(function () {
$('img').animate({
'margin-left': '+=100px'
}, 'fast');
var a = $('img').css('margin-left');
if (a == "1200px") {
clearInterval(i);
}
}, 50);
});
});
</script>
<img src="48_800[1].jpg" height="50px" width="50px"><br>
<input type="button" value="start" id="btn"><br>
</body>
</html>
It is not working.Can anyone help me?
You should cast to an integer the pixels value a = parseInt(a);. (as before you were obtaining values of margin-left with decimals, such as 99.45px and then 199.45px so it was jumping the 100px)
Live example
var i = setInterval(function () {
$('img').animate({
'margin-left': '+=100px'
}, 'fast');
var a = $('img').css('margin-left');
a = parseInt(a);
if (a >= 100) {
clearInterval(i);
}
}, 50);
Update
I've just noticed the animation still running after the interval has been cleared. Not sure why is this happening but I found a way to solve the problem by caching the final margin in a variable rather than calculating it inside the animation.
Live example 2
Note that in the examples I'm using >=100 to see the results.
Use this instead: Updated
$(document).ready(function () {
$('#btn').click(function () {
var i = setInterval(function () {
$('img').animate({
'margin-left': '+=100px'
}, 'fast');
var a = $('img').css('margin-left');
//console.log(a.substring(0,a.lastIndexOf('px')));
if (a.substring(0,a.lastIndexOf('px')) >= 1200) {
clearInterval(i);
}
}, 50);
});
});
try this:
if(parseInt(a) >= 1200)
{
clearInterval(i);
}
},50);
$(document).ready(function () {
$('#btn').click(function () {
var a="";
while(a != "1200px"){
$('img').animate({
'margin-left': '+=100px'
}, 'fast');
a = $('img').css('margin-left');
}
});
});
your existing code looks erroneous ,besides referring to SetInterval is not required, the same could be achieved with decent while clause itself.
happy Coding :)
try to change the value for the time into the setInterval method
the number value must to be in milliseconds
I am able to move button to left side but after that how i can again move it to right side.
Can i also use delay here.
Here is the code that i have tried:
$(document).ready(function () {
example_animate(10);
});
function example_animate(px) {
$('#Button1').animate({
'marginLeft': px
});
}
you can use this, it is working perfectly for me, it will continuously move your element back and forth, and you can also vary animation speed.
function animatethis(targetElement, speed) {
$(targetElement).animate({ marginLeft: "+=10px" },
{
duration: speed,
complete: function () {
targetElement.animate({ marginLeft: "-=10px" },
{
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
)};
}
use this to implement:
animatethis($('#controlid'), 1500);
Cannot answer properly without looking at your HTML and CSS but what you are doing is right. Simply call your example_animate() with a negative value
i.e.
example_animate(-10);
Or if you want to bring it to the original value (assuming originally it had 0 margin)
example_animate(0);
Note: This is probably not the best way to animate
Yes, the animate function takes a function that is called after the animation is complete. So you can do:
$(document).ready(function () {
example_animate(100);
});
function example_animate(px) {
$('#Button1').animate({
'marginLeft': px
}, function(){
$('#Button1').animate({
'marginLeft': 1
});
});
}
http://jsbin.com/ixajol/1/edit
Do execly the same only to the right, Its not that hard if you can make it go left.
Maybe
var button_init_marginLeft;
$(document).ready(function () {
button_init_marginLeft = $('#Button1').css("marginLeft");
example_animate(10, true);
example_animate(null, false);
});
function example_animate(px, to_left) {
if (to_left)
{
$('#Button1').animate({
'marginLeft': px
});
}
else
{
$('#Button1').animate({
'marginLeft': button_init_marginLeft
});
}
}
?
I am using JQuery for making a widget effect i.e. minimizing and maximizing a widget..
But the problem is that when i click on the minimize button speedily the widget crashes..
I think that the problem is that it takes mid animation height as its new height at the time of toggle...
Please help...
$(document).ready(function () {
$('.widget-minimize').click(function () {
toggleMinimize($(this).parents('.widget').attr('id'));
});
$('.widget-close').click(function () {
closeWidget($(this).parents('.widget').attr('id'));
});
});
function toggleMinimize(widgetId) {
var $content = $('#' + widgetId + ' .widget-content');
if ($content.height()) {
$content.data('oldheight', $content.height());
$content.animate({height: 0});
$('#' + widgetId).find('.widget-minimize').attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-maximize.png').attr('alt', 'maximize');
}
else {
$content.animate({height: $content.data('oldheight')});
$('#' + widgetId).find('.widget-minimize').attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-minimize.png').attr('alt', 'minimize');
}
}
function closeWidget(widgetId) {
$('#' + widgetId).animate({ "opacity": 0, "height": 0 }, 200, "swing");
}
Click here to see jsFiddle
Just return from your toggleMinimize function if your content is currently being animated, like this:
function toggleMinimize(widgetId) {
var $content = $('#' + widgetId + ' .widget-content');
if ($content.is(':animated')) {
return;
}
See working fiddle
In my case, the fiddle is working correctly, but I would recommend you to use max-height in case of height, so use max-height: 0 and max-height: 80 (assuming 80 is a bit more of the max height). Also you can pass the element and not just the ID.
$(document).ready(function () {
$('.widget-minimize').click(function () {
toggleMinimize($(this).parents('.widget'));
});
$('.widget-close').click(function () {
closeWidget($(this).parents('.widget'));
});
});
function toggleMinimize(selector) {
var $content = $('.widget-content', selector);
if ($content.height()) {
$content.data('oldheight', $content.height());
$content.animate({maxHeight: 0});
$('.widget-minimize', selector).attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-maximize.png').attr('alt', 'maximize');
}
else {
$content.animate({maxHeight: $content.data('oldheight')});
$('.widget-minimize', selector).attr('src', 'http://dl.dropbox.com/u/638285/SO/images/icon-minimize.png').attr('alt', 'minimize');
}
}
function closeWidget(widgetId) {
$('#' + widgetId).animate({ "opacity": 0, "max-height": 0 }, 200, "swing");
}
Take a look at jQuery's .stop() method and its :animated selector. I often use them in situations like this to help me handle animations that are already running.
For example:
$("#element").on("click", function() {
if ($(this).not(":animated")) {
...animation code...
}
});
and
$("#element").on("click", function() {
$(this).stop();
...animation code...
});
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)
);
});