CSS: Slide Button onclick und Inhalt anzeigen?

Question

Ich versuche, eine Schaltfläche mit CSS und jQuery zu verschieben, und zeigen Sie den Inhalt basierend auf der Schaltfläche geklickt.

Ich weiß nicht, was dieser Effekt genannt, so dass ich seinen Namen nicht verwenden kann. Hier

ist ein Beispiel (sehr unordentlich), die ich kam, so dass Sie verstehen, was ich versuche zu tun:

http://jsfiddle.net/Te9T5/2238/

Wenn Sie auf der 2-Taste 1 und Knopf klicken, werden Sie Siehe die Folienanimation.

Das ist mein CSS:

.box img { 
    -webkit-transition:1s; 
} 
.box img.clicked{ 
    margin-left:50px; 
} 

.b{ 
    position:absolute; 
    left:25px; 
} 
.b:hover{ 
    curser:pointer; 
} 

    .btn1{ 
    position:absolute; 
    left:25px; 

} 


    .btn2{ 
    position:absolute; 
    left:100px; 


} 

    .btn3{ 
    position:absolute; 
    left:160px; 

} 

Und das ist mein jquery:

$('.b').on('click', function() { 
    $('.box img').toggleClass('clicked'); 
}); 

Fragen:

1. was ist der Name dieser Effekt?
2. könnte jemand bitte beraten, wie man diesen Effekt richtig erzielt?

Vielen Dank im Voraus.

EDIT:

Das ist, was ich bisher getan haben. Ich versuche immer noch herauszufinden, was dieser Effekt genannt und nicht in der Lage, etwas zu diesem, wie noch im Zusammenhang zu finden:

http://jsfiddle.net/Te9T5/2239/

es als erster Code ist nicht so chaotisch, aber immer noch nicht arbeite so, wie ich es brauche um zu arbeiten.

Jede Hilfe wäre willkommen.

Answer 1

Sie können die gleitende Animation erreichen, indem die Position eines jeden Link zu berechnen und die Schaffung eines Ereignis-Listener den Hintergrund zu animieren:

var width_spn = $('.b').width(); 
var width_btn = 100; 

// Initialize position 

$('.box img').css({ 
    width: width_btn, 
    left: (width_spn/2) - (width_btn/2) 
}); 

// Setup animation 

$('.b').click(function() { 

    var left = $(this).position().left + (width_spn/2) - (width_btn/2); 

    $('.box img').stop().animate({ 
    'left': left 
    }); 
}); 

Komplettes Beispiel basierend auf dem Code:

JSFIDDLE