Question

想象一下ul和li，并且在选择时突出显示li，例如

li.selected { background-color: Yellow; }

有没有办法让背景动画/移动到所选项？

为了更好地解释我想要的东西，请看这个链接
http://jsfiddle.net/BVaV4/1/
尝试点击项目，我希望背景动画就像那样（但是看不到我在那里作弊的代码）

使用jQuery和CSS有一种简单的方法吗？肯定有人做过吗？

Answer 1

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

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

所以要达到你想要的，你需要一个替代品。您似乎已经找到了它：您在给定元素下创建了<div>，而不是使用它的background属性，而是使用<div>。

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

您可以采用“真实”背景，并将其替换为您的行为方式。

你可以创建一个

的jQuery插件

可以应用于列表
检查所选对象的背景（宽度，高度，颜色等），您需要以某种方式标记所选项目（例如，通过给它一个.highlighted类）。
使用共享类似属性的div替换所选对象的背景
单击其他项目时，会将所选内容移动到所单击项目的位置，并复制其他项目（宽度，高度）。

目标是保持html和css清除任何表明将使用插件的内容，并通过javascript修改html。

有可能已经有一个jQuery插件提供相同的效果，但很可能是以同样的方式作弊（尽管你不必再写它:)）。

修改：

看了之后，我发现jQuery UI已经有了适合你的效果：

.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()更加一致，但我不是动画魔术师，我需要更多的时间来计算如何（顺序动画不同的元素似乎很棘手）。

Answer 2

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

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

为了获得更好的效果，你可以改进你的造型

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

Answer 3

我修改了第一个小提琴，告诉你如何做here。

jQuery的：

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

Answer 4

另一种可能性是使用放在后台的css精灵，并让计时器以1/15秒的间隔为其设置动画..但如果动画很复杂，则所需的bkg图像可能会变得很大

jQuery / CSS - 动画项目选择

4 个答案: