So I've gotten half of this code to work, but I can't seem to get the rest of it going.
I can get the div to fade in, but not the image to move.
var mouse_is_inside = false;
$(document).ready(function() {
$(".how_btn").click(function() {
var howWorks = $("#jhow_works");
if (howWorks.is(":visible"))
howWorks.fadeOut("fast");
else
howWorks.fadeIn("fast");
return false;
$("#spot-1").animate({
marginLeft: "+=40px",
}, 2000 );
});
$("#jhow_works").hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").click(function(){
if(! mouse_is_inside) $("#jhow_works").fadeOut("fast");
});
});
the css
#jhow_works {
display:none;
position:absolute;
width:440px;
margin:310px 150px 0 360px;
}
img#spot-1 {
position: absolute;
margin-left: 55px;
margin-top: 20px;
}
The html
<div id="jhow_works">
<div id="how_wrapper">
<img id="spot-1" src="../images/spot.png" alt="" >
</div>
</div>
<div id="how_it_works">
<div id="logo_how"><a class="how_btn" href="..."><img class="how_button" src="../images/how_it_works_logo.png" alt="How it works!" ></a></div>
<div id="text_how"><a class="big how_btn" href="..."><strong class="big_bold_main">How</strong> it Works</a></div>
</div>
I must be doing something stupid here. I appreciate any help
Thanks!