Question

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

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

这是一个例子（非常凌乱）我出现了，所以你可以理解我想要做的事情：

如果单击按钮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/

任何帮助都将不胜感激。

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

CSS：滑动按钮点击并显示内容？

1 个答案: