Question

I asked this question earlier & was provided with some code, however it refuses to work when I put it inside of div’s as the site is structured so i’m retrying here.

here is the format of the page.

http://jsfiddle.net/4FMGG/2/

<div style="width:960px;">
    <div style="float:left; width:960px;">
        <a href='#'>Electric</a>
        <a href='#'>Mechanic</a>
    </div>                    
    <div style="width:320px; float:left;">
        <div id='elec'>Box 1a</div>
        <div id='meca'>Box 2a</div> 
    </div>
    <div style="width:320px; float:left;">
       <img src="dial.png" style="margin-top:150px;">
    </div>
    <div style="width:320px; float:right;">
        <div id='meca'>Box 2b</div> 
        <div id='elec'>Box 1b</div>
    </div>
</div>​

I’m basically wanting to replicate the services section on http://mitchell-me.com/
I’ll change it all etc later but the effect is killing me. I was given two suggestions last time, 1 was jquery which worked fine outside of div’s but since it has to be in the div’s i couldnt use it. The second was that the site was using tweenlite but that method seems overkill for just this particular feature.

So basically im struggling like mad, really need to wrap this section of the site up before xmas so hoping for some xmas luck here on stack overflow xD

Apologies for the code format, i can’t get it to sit properly using this editor.

Answer 1

whipped this together, let me know if it suits your needs.
here is a fiddle: http://jsfiddle.net/4FMGG/6/

css

    body{
    text-align:center;
    background:#eee;
}
.container {
    width:400px; margin:100px auto 0;
    text-align:center;
    position:relative;
}
#dial {
    width:210px;position:relative;margin:0 auto;
}
#switch {
    cursor: pointer;
}
#gear {
    position:absolute;
    top:55px;left:55px;
    opacity:0;
}
#bulb {
    position:absolute;
    top:70px;left:83px;
}
#mech1, #mech2, #elec1, #elec2 {
    position:absolute;
    width:100px;
    height:100px;
    background:#fff;
}
#mech1 {
    top:0;right:0;
    display:none;
}
#elec1 {
    top:0;left:0;
}
#mech2 {
    bottom:0;left:0;
    display:none;
}
#elec2 {
    bottom:0;right:0;
}

html

<div class="container">
    <div id="dial">
        <img src="http://mitchell-me.com/img/dial.png">
        <div id="bulb">
            <img src="http://mitchell-me.com/img/bulb.png">
        </div>
        <div id="gear">
            <img src="http://mitchell-me.com/img/gear.png">
        </div>
    </div>
    <div id="mech1"></div>
    <div id="mech2"></div>
    <div id="elec1"></div>
    <div id="elec2"></div>
    <div id="switch">
        <a id="one">One</a>
        <a id="two">Two</a>
    </div>
</div>

javascript

must include the following libraries:

//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

//jqueryrotate.googlecode.com/files/jQueryRotate.2.2.js

$("#one").click(function(){
    $('#dial').rotate({
        angle: 100, 
        animateTo:0,
        duration:1000
    });
    $('#bulb').animate({'opacity':1}, 1000);
    $('#gear').animate({'opacity':0}, 1000);
    $('#mech1, #mech2').fadeOut(1000);
    $('#elec1, #elec2').fadeIn(1000);
});  


$("#two").click(function(){
    $('#dial').rotate({
        angle: 0, 
        animateTo:100,
        duration:1000
    });
    $('#bulb').animate({'opacity':0}, 1000);
    $('#gear').animate({'opacity':1}, 1000);
    $('#mech1, #mech2').fadeIn(1000);
    $('#elec1, #elec2').fadeOut(1000);
});