Jquery animating image, position, width and height - javascript

I have one situation with animating "img", when i put my var complete inside click function it wont animate but when i make it outside function it's working.Does it have something with global and local scope? thank you
var complete = true;
$("img").click(function() {
if (complete) {
$(this).animate({
left: "50%",
top: "400px",
width: "300px",
height: "300px"
}, 700);
} else {
$(this).animate({
left: "8px",
top: "10px",
width: "150px",
height: "150px"
}, 700);
}
complete = !complete;
});

If you put
var complete = true;
inside the callback for the click handler, it will be defined as true every time the function is invoked, which essentially redefines the function as
$("img").click(function() {
if (true) {
$(this).animate({
left: "50%",
top: "400px",
width: "300px",
height: "300px"
}, 700);
} else {
$(this).animate({
left: "8px",
top: "10px",
width: "150px",
height: "150px"
}, 700);
}
});
And by simplifying further:
$("img").click(function() {
$(this).animate({
left: "50%",
top: "400px",
width: "300px",
height: "300px"
}, 700);
});
By defining complete outside of the function, the variable's value persists beyond a single call of the function, allowing the global state to be toggled by each call.

Related

Compare object with objects

I have that object with simple objects
public positions = {
reading: {
left: "0px",
},
writing: {
left: "0px",
},
speaking: {
left: "0px",
},
listening: {
left: "0px",
},
};
I need to check if some of the 'left' properties are the same and if they are add 'top' property to one of them. For example if I have object like this:
public positions = {
reading: {
left: "10px",
},
writing: {
left: "20px",
},
speaking: {
left: "20px",
},
listening: {
left: "7px",
},
};
Sholud be transformed to this:
public positions = {
reading: {
left: "10px",
},
writing: {
left: "20px",
},
speaking: {
left: "20px",
top: "10px"
},
listening: {
left: "7px",
},
};
I need simplest way to do that.
Maybe this?
const positions = {
reading: {
left: "0px",
},
writing: {
left: "0px",
},
speaking: {
left: "0px",
},
listening: {
left: "0px",
},
};
const positions2 = {
reading: {
left: "0px",
},
writing: {
left: "0px",
},
speaking: {
left: "0px",
},
listening: {
left: "0px",
},
};
for (var key in positions) {
if (positions2[key].left == positions[key].left) {
positions2[key].top = '10px'
}
}
console.log(positions2)

Animating like balloon bursting using javascript / jquery

I would like make a image burst to pieces, this animation should continue infinetly. Pls advice on how to proceed with this? Is it possible to use the jquery animate function to achieve this.
Try this,
http://jsfiddle.net/Dripple/AGGrv/.
This makes a fine animation of bursting a balloon.
$("#bubble1").click(function() {
$("#bubble1").stop(true, false);
$(this).hide("explode", {
pieces: 50
}, 250);
});
function animate1() {
$("#bubble1").animate({
"-moz-border-radius": "110px/100px",
"-webkit-border-radius": "110px 100px",
"border-radius": "110px/100px",
height: '100px',
width: '110px',
top: '240px'
}, 1500, animate2());
}
function animate2() {
$("#bubble1").animate({
"-moz-border-radius": "100px/110px",
"-webkit-border-radius": "100px 110px",
"border-radius": "100px/110px",
height: '110px',
width: '100px',
top: '235px'
}, 1500, function() {
$('#bubble1').trigger('mouseover');
});
}
$("#bubble1").mouseover(function() {
animate1();
});
$("#bubble1").mouseout(function() {
$("#bubble1").stop(true, false);
});

Why I can not click on my function to show and hide?

Hey I am having difficulty rewriting a code, but it is not working when clicking to show. How can I fix this issue. The code works opens up 500 then is suppose to work by click. But it does not work. Here is the code:
var timer;
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow", function () {
timer = setTimeout(function () {
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
}, 500);
});
$(".icon-menu-2").click(function show() {
$(".c_left").show.animate({ width: 200, marginRight: 30, display: 'toggle'}, 'slow');
$(".c_right").show.animate({ marginRight:215, display:'toggle'}, 'slow', function () {
clearTimeout(timer);
});
}, function hide() {
$(".c_left").animate({ marginRight: -155, display: 'toggle'}, 'slow');
$(".c_right").animate({ marginRight:30, display:'toggle'}, 'slow');
});
http://jsfiddle.net/jL5hU/
How can I fix my code?
As bfvareto commented .show() is a function and you cannot call it with just .show
You had strange code here also: .click(function show() {. Not quite sure what you mean there, anyway try my code suggestion...
var timer; var open;
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow", function () {
timer = setTimeout(function () {
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
open = false;
}, 500);
});
$(".icon-menu-2").click(function() {
if(open){
$(".c_left").animate({ marginRight: "-155px"}, "slow");
$(".c_right").animate({ marginRight: "30px"}, "slow");
} else {
$(".c_left").animate({ marginRight: "30px"}, "slow");
$(".c_right").animate({ marginRight: "215px"}, "slow");
}
open = !open;
});
Demo here

How to animate the width with slide effect (jquery)?

How do I animate the width with a slide effect to the right?
Here's my code:
$(".toggle").click(function(){
$(".wrapper").animate({ width: "80%" });
});
Thank you!
You could do this:
$(".toggle").click(function () {
$(".wrapper").animate({
width: "80%"
}, {
duration: 1000,
specialEasing: {
width: 'linear'
}
});
});
FIDDLE DEMO
$("#go").click(function(){
$("#block").animate({
width: "70%"
}, 1500 );
});

Strange jquery animation behavior

The website uses a "black opacity" filter made with this:
/* Body black hover */
$(document).ready(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.5 }, 1000);
$("body").hover(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.5 }, 1000);
}, function( ) {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0 }, 1000);
});
});
The problem I have is that I wanted to make a little animation when the user enters to "SOBRE NOSALTRES" (click upper menu to enter the page).
As you can see it animates "well" but not at all, sometimes if you go to "PRODUCTES" and back to "SOBRE NOSALTRES" the animation get's stuck at 98% width. It's kind of strange, why does it happens?
here it's a screenshot of the error:
http://webkunst.comeze.com/test/3.png
and this is the script i'm using to make the animation on NOSALTRES page:
<script>
$(document).ready(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
$('li#nosaltres').addClass('active')
});
$("body").hover(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.9 }, 500);
}, function( ) {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0 }, 500);
});
</script>
The problem occurs when you hover in the <body> when the PRODUCTES page is loading since you call $("#bg_hover").stop(); in the first line of $("body").hover(function() {}); which stops all animation, including the animation that is reducing the width to 80%.
I can reproduce the problem by clicking on SOBRE NOSALTRES, then moving the mouse to the in and out of the browser window quickly.
I would not add the hover effect to the <body> until the initial resizing to 80% is finished, for example by adding an anonymous function to call once the animation is complete.
$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800, function() {
$('li#nosaltres').addClass('active');
$("body").hover(function() {
$("#bg_hover").stop().animate({ opacity: 0.9 }, 500);
}, function( ) {
$("#bg_hover").stop().animate({ opacity: 0 }, 500);
});
});
Dont split it into two lines:\
$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
Instead, use:
$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);

Categories