Hello all!

 

Ive been playing with jquery and find it fun and hard at the same time..

 

Well this is my test hthml page with code ive come up with the problem being it works fine in firefox but does not do anything in internet exsplorer. I think it could be my coding ... Any help will be great thanks.

 

A online demo can be found here http://www.swipedstudio.com/jq_movement/

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<!-- change this line per page -->

<title>move</title>

<!-- dont change -->

<script type="text/javascript" src="scripts/jquery.js"></script>

<style>

.moveme

{

background-color:#000;

height:20px;

width:20px;

position:absolute;

top:25px;

}

.moveme2

{

background-color:#000;

height:20px;

width:20px;

position:absolute;

top:50px;

}

.moveme3

{

background-color:#000;

height:20px;

width:20px;

position:absolute;

top:75px;

}

</style>

 

<script type="text/javascript">

var gip =".moveme";

$(document).ready(function(){

 

$(".click").click(function(){

gip = $(this).attr('id');

//alert(gip);

myCallback8(gip);

});

 

function myCallback8(gip){

$("#"+gip).animate

({

opacity: 1.0,

marginLeft: "385px",

marginTop: "185px",

}, 1100 , myCallback);

}

 

function myCallback(){

$("#"+gip).animate({

opacity: 0.05,

marginLeft: "185px",

marginTop: "20px",

width: "700px",

height: "450px"

}, 1100 , myCallback2);

}

function myCallback2(){

$("#"+gip).animate({

opacity: 1.0

}, 1100, myCallback3);

}

function myCallback3(){

$("#"+gip).animate({

opacity: 0.05,

marginLeft: "385px",

marginTop: "185px",

width: "20px",

height: "20px"

}, 1100 , myCallback5);

}

function myCallback5(){

$("#"+gip).animate({

opacity: 1.0,

marginLeft: "0px",

marginTop: "0px",

width: "20px",

height: "20px"

}, 1100);

$(".block").stop();

}

 

});//ends onready function

</script>

</head>

<body>

<div id="home_but" class="moveme click"></div>

<div id="about_but" class="moveme2 click"></div>

<div id="port_but" class="moveme3 click"></div>

</body>

</html>

You have a syntax error at myCallback8 :

 

marginTop: "185px",

should be :

marginTop: "185px"

 

Fixed version :

 

<script type="text/javascript">
var gip =".moveme";
$(document).ready(function(){

$(".click").click(function(){
gip = $(this).attr("id");
//alert(gip);
myCallback8(gip);
});

	function myCallback8(gip){
	$("#"+gip).animate
	({ 
	opacity: 1.0,
	marginLeft: "385px",
	 marginTop: "185px"
	}, 1100 , myCallback());
	}

function myCallback(){
	$("#"+gip).animate({ 
	opacity: 0.05,
	marginLeft: "185px",
	marginTop: "20px",
	width: "700px",
	height: "450px"
	}, 1100 , myCallback2());
}
function myCallback2(){
	$("#"+gip).animate({ 
	opacity: 1.0
	}, 1100, myCallback3());
}
function myCallback3(){
	$("#"+gip).animate({ 
	opacity: 0.05,
	marginLeft: "385px",
	marginTop: "185px",
	width: "20px",
	height: "20px"
	}, 1100 , myCallback5());
}
function myCallback5(){
	$("#"+gip).animate({ 
	opacity: 1.0,
	marginLeft: "0px",
	marginTop: "0px",
	width: "20px",
	height: "20px"
	}, 1100);
	$(".block").stop();
}

});//ends onready function
</script>

Thanks worked a charm! , was up late toying with it and this was me trying to work a way to grab the id tag.

 

Now to add learn how to add a if(){} to it so that if another .click class is pressed it wont work till the animation is stoped.

 

Thanks again!

Now to add learn how to add a if(){} to it so that if another .click class is pressed it wont work till the animation is stoped.

Are you trying to stack the animations? or prevent them stacking?

Trying to stop another div from being clicked once one is running .. as they use the same animation function the second click makes the first not finish. So i want to put a if(var == in_use){ dont run}

 

edited!

 

if(in_use == "false")

{

in_use = "true";

$(".click").click(function(){

gip = $(this).attr('id');

myCallback8(gip);

//alert(in_use);

});

}else{ return; }

 

something to this effect

Fixed it :-)... run the if inside the $(".click").click(function(){

 

YAY :-)