jquery - CSS:滑动按钮onclick并显示内容？

我正在尝试使用CSS和jQuery滑动按钮，并根据单击的按钮显示内容。

我不知道这个效果叫什么，所以我不能使用它的名字。

这是我出现的一个示例（非常混乱），因此您可以了解我正在尝试做什么：

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

如果单击按钮1和按钮2，您将看到幻灯片动画。

这是我的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;

 }

这是我的jQuery：

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

问题：


这种效应的名字是什么？
有人可以建议如何正确实现此效果吗？


提前致谢。

编辑：

到目前为止，这是我所做的。我仍在尝试弄清楚这种影响是什么，并且到目前为止还无法找到与此有关的任何信息：

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

它不像第一个代码那样凌乱，但仍然无法按我需要的方式工作。

任何帮助，将不胜感激。

最佳答案

您可以通过计算每个链接的位置并创建事件侦听器来为背景设置动画来实现滑动动画：

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

根据您的代码的完整示例：

JSFIDDLE