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

Question

我正在尝试使用 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');
});

问题:

1. 这个效果的名称是什么？
2. 有人可以建议如何正确实现这种效果吗？

提前致谢。

编辑:

这就是我到目前为止所做的。我仍在试图弄清楚这种效果的名称，但目前尚未找到与此相关的任何内容:

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

它不像第一个代码那么困惑，但仍然无法按照我需要的方式工作。

如有任何帮助，我们将不胜感激。

Answer 1

您可以通过计算每个链接的位置并创建事件监听器来对背景进行动画处理来实现滑动动画:

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