We Keep Coding

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);
});

Button pressed js overlay function

So, I have a js script:
<script>
$(document).ready(function() {
$("#changePh").click(function() {
$("changebox").overlay().load();
\});
$("#changebox").overlay({
top: 260,
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: false,
load: true
});
});
</script>
and i wanted that overlay appears after that i pressed the button, insted now it's appears
immediately i load the page
I have also a button with id="changePh" and a form with id="changebox"
Who can help me...

Try to move your overlay function inside click function:
$("#changePh").click(function() {
$("#changebox").overlay().load();
$("#changebox").overlay({
top: 260,
mask: {
color: '#fff',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: false,
load: true
});
});
Btw, you're missing # inside $("#changebox") and redundant \ before closing }) of your click function.

How to change div style when click to another

I would to change the div css style when click, then change to it primary status when click to another.
i used this code but it just rechange it when click on another div,
here the code am trying:
$('.mydiv').click(
function() {
$(this).stop().animate({
width:'960px',
backgroundColor : '#000'
}, 500);
}, function () {
$(this).stop().animate({width:'300px', backgroundColor : "green"}, 300);
});

You're probably looking for the toggle() function :
$('.mydiv').toggle(function() {
$(this).stop().animate({
width: '960px',
backgroundColor: '#000'
}, 500);
}, function() {
$(this).stop().animate({
width: '300px',
backgroundColor: "green"
}, 300);
});​
And you need jQuery UI to animate colors ?
FIDDLE
EDIT:
You're probably still looking for the toggle() function, but to animate one div when clicking on another div, stop using the this keyword and target the div you're trying to animate :
$('#someDiv').toggle(function() {
$('.mydiv').stop().animate({
width: '960px',
backgroundColor: '#000'
}, 500);
}, function() {
$('.mydiv').stop().animate({
width: '300px',
backgroundColor: "green"
}, 300);
});​
FIDDLE

Try this:
$('.mydiv').click(function() {
$(this).stop().animate({
width:'960px',
backgroundColor : '#000'
}, 500, function() {
$(this).stop().animate({width:'300px', backgroundColor : "green"}, 300);
});
});

escClose in simple modal

I'm working with simple modal, and I'm trying to prevent the close on escape. This says it should be simple, but this doesn't work for me, am I putting this in the wrong place?
$(document).ready(function(){
$("#login_modal").modal({
overlayCss: {
backgroundColor: '#000',
},
containerCss: {
height: 485,
width: 385,
backgroundColor: "#f6f6f6",
border: '3px solid #d3d5d6',
fontSize: '10pt',
color: '#58595b',
fontFamily: 'sans-Serif',
fontWeight: '100',
paddingLeft: 5,
paddingTop: 5,
opacity: .94,
escClose: false,
},
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow');
dialog.data.show();
dialog.container.fadeIn('slow', function () {
$('body').css('overflow', 'hidden');
});
},
onClose: function (dialog){
$('body').css('overflow', 'auto');
dialog.container.fadeOut('200');
dialog.overlay.fadeOut('200', function () {
$.modal.close();
});
},
});
});

Yes, escClose is in the wrong place - it's a parameter on the modal itself, not the containerCss array. You also have extra commas at the end of your overlayCss and containerCss property arrays. This sometimes causes issues in browsers. Try this;
$(document).ready(function(){
$("#login_modal").modal({
escClose: false,
overlayCss: {
backgroundColor: '#000'
},
containerCss: {
height: 485,
width: 385,
backgroundColor: "#f6f6f6",
border: '3px solid #d3d5d6',
fontSize: '10pt',
color: '#58595b',
fontFamily: 'sans-Serif',
fontWeight: '100',
paddingLeft: 5,
paddingTop: 5,
opacity: .94
},
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow');
dialog.data.show();
dialog.container.fadeIn('slow', function () {
$('body').css('overflow', 'hidden');
});
},
onClose: function (dialog){
$('body').css('overflow', 'auto');
dialog.container.fadeOut('200');
dialog.overlay.fadeOut('200', function () {
$.modal.close();
});
},
});
});

How to make a background animation into a loop (repeat function)

I have a script showing starts on the background of the website. It stops after a while. How can I make it into a loop?
$(function(){
$('#midground').css({backgroundPosition: '0px 0px'});
$('#foreground').css({backgroundPosition: '0px 0px'});
$('#midground').animate({
backgroundPosition:"(-10000px -2000px)"
}, 240000, 'linear');
$('#foreground').animate({
backgroundPosition:"(-10000px -2000px)"
}, 180000, 'linear');
})

Stick it in a function then call itself after a setTimeout.
function myAnimation() {
$('#midground').css({backgroundPosition: '0px 0px'});
$('#foreground').css({backgroundPosition: '0px 0px'});
$('#midground').animate({
backgroundPosition:"(-10000px -2000px)"
}, 240000, 'linear');
$('#foreground').animate({
backgroundPosition:"(-10000px -2000px)"
}, 180000, 'linear', function() {
setTimeout(myAnimation, 500);
});
});
}