jQuery/CSS - 动画项目选择

想象一下ul和li，并选择一个li时突出显示，例如。jQuery/CSS - 动画项目选择

li.selected { background-color: Yellow; }

有没有办法让背景动画/移动到选定的项目？

为了更好地解释什么，我想，请访问以下链接上的项目
http://jsfiddle.net/BVaV4/1/
尝试点击，我希望背景动画就像这样（但不要看到代码我欺骗那里）

有没有简单的方法来做到这一点使用jQuery和CSS？当然有人做到了？

来源

2013-05-02 Aximili

那么你的问题是什么？这似乎是你想要它在小提琴中的方式？ – 2013-05-02 07:20:01

同意，这里发生了什么？ – Kyle 2013-05-02 07:20:25

它是一个完成这个动画的好方法。不过，您可以尝试使用背景图像来设置背景大小和背景位置。 – Jashwant 2013-05-02 08:18:22

我知道你想动画的“真实”的背景，但这是不可能的你想要的方式。 html元素的“背景”直接在元素后面。您可以使用background-position:来更改它的位置，但如果它跨越元素，它将被剪裁。

每个html元素都有一个背景，它们是分开的，你不能在它们之间以你想要的方式动画。不仅背景不能留下它的元素，而且jQuery动画基本上改变了一个元素的属性，而不是“合并”一个元素。

因此，要实现你想要的东西，你需要一个替代品。看起来你已经找到了它：你在给定的元素下创建了一个<div>，而不是使用它的背景属性，你使用那个<div>。

你可能称之为作弊，但你所做的并不是那么糟糕，你只需要把它包起来，因为螺丝钉已经挂了。

你可以采取“真实”的背景，并取而代之的是你的行为方式，你打算。

你可以做一个jQuery插件，

可以应用到列表
检查所选择的对象（宽度，高度，颜色等）的背景下，你需要以某种方式将所选项目标记（例如，通过给它一个强调的类）。
取代所选对象的背景与一个div共享类似的特性
的其他项被点击时，它移动选择所点击的项目的位置和拷贝其他项的（宽度，高度）。

目标是保持html和css不受任何干扰，表明将会有一个插件使用，并通过javascript修改html。

可能有一个jQuery插件提供了相同的效果，但很可能它以相同的方式作弊（尽管您不必再次编写它:)）。

编辑：

服用其他看看这个之后，我发现，jQuery用户界面已经有适合你的影响：

的.effect() “转移”。你会得到一个转移元素，它可以从源元素滑动并变形到目标。你可以用一个班级来设计它。

我已经结束了一个捣鼓你：http://jsfiddle.net/BVaV4/22/

$(function() { 
    $('li').click(function() { 
     var $prev = $('li.selection'), 
      $this = $(this); 

     if (!$this.is('.selection')) { 

      $prev.removeClass('selection'); 
      $prev.removeClass('selected'); 
      $this.addClass('selection'); 

      $prev.effect('transfer', { 
       to: '.selection', 
       className: "ui-effects-transfer" 
      }, 500, function() { 
       if ($this.hasClass('selection')) { 
        $this.addClass('selected'); 
       } 
      }); 
     } 
    }); 
});

请注意，我已经做出了选择，并选择类。如果用户点击太快，这种双重分类可以防止魔法崩溃。如果用户点击太快，仍然会有一个双重背景动画。如果您将动画制作得更快，它将不太明显。

通过排队所有动画和类切换到同一队列，您可以使动画更符合jQuery.queue()，但我不是动画魔术师，我需要更多时间来弄清楚如何按顺序动画不同的元素似乎很棘手）。

来源

2013-05-02 07:40:22 SoonDead

+1非常好描述！这样的jQuery插件正是我所追求的！ – Aximili 2013-05-02 23:36:57

哇！你是最好的SoonDead不会死！ – Aximili 2013-05-04 08:37:57

谢谢，我只是不想让我的答案未完成。幸运的是，我的昵称是一个双关语，与死亡没有直接关系。 :) – SoonDead 2013-05-04 19:03:32

要移动背景（无动画），您必须“选择”仅最后点击的项目，并首先取消选择所有其他项目。

$(function(){ 
    $('li').click(function(){ 
     $(this).siblings("li").removeClass("selected"); 
     $(this).addClass("selected");  
    }); 
});

一个更好的效果，你可以细化一点的造型

li.selected { background: #cdf; } 
li:hover { color:#f96; }

来源

2013-05-02 07:41:00

我修改第一小提琴向您展示如何做到这一点here。

的jQuery：

$(function(){ 
    $('li').click(function(){ 
     $('.highlight').animate({'top': (18 + $(this).index() * 18)+'px'},function() { 
    $('.highlight').css({'display': 'block'}); 
    }); 
    }); 
});

来源

2013-05-02 08:22:42 Romain

这与问题无关。 – SoonDead 2013-05-02 09:08:10

问题：“有没有办法让背景变成动画/移动到选定的项目？” 最有效的方法是创建li选定项目高度的背景div。然后我们显示背景div并将其移动到选定的li元素上。而这正是我在链接中所做的。 – Romain 2013-05-02 09:24:24

尽管您对问题中提供的脚本进行了轻微更正，但它仍然相同。问题在于寻找一种“不太可靠”的方式。 – SoonDead 2013-05-02 09:33:25

另一种可能性是使用CSS精灵放在后台，有一个计时器有生它在1/15秒的时间间隔..但是如果动画是复杂的所需BKG图像可能成为相当大

来源

2013-05-03 10:19:29 user1555320

jQuery/CSS - 动画项目选择

回答

相关问题