jQuery/CSS - 动画元素选择

Question

想象一下 ul 和 li 的，选择时会突出显示一个 li，例如。

li.selected { background-color: Yellow; }

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

为了更好地解释我想要什么，请查看此链接
http://jsfiddle.net/BVaV4/1/
尝试单击元素，我希望背景像那样动画(但看不到我在那里作弊的代码)

有没有使用 jQuery 和 CSS 的简单方法来做到这一点？肯定有人做过？

Answer 1

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

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

因此，要实现您想要的效果，您需要一个替代品。看来你已经找到了:你做了一个 <div>在给定元素下，不使用它的背景属性，而是使用 <div> .

你可以称之为作弊，但你所做的并没有那么糟糕，你只需要把它包起来，因为螺丝都挂了。

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

你可以制作一个 jQuery 插件

• 可以应用于列表
• 检查所选对象的背景(宽度、高度、颜色等)，您需要以某种方式标记所选元素(例如，通过给它一个 .highlighted 类)。
• 用具有相似属性的 div 替换所选对象的背景
• 当其他元素被点击时，它将选择移动到被点击元素的位置并复制其他元素的(宽度、高度)。

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

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

---

编辑:

再看看这个，发现jQuery UI已经有适合你的效果了:

.effect() “转移”。您会得到一个传输元素，它从源元素滑动并变形到目标元素。你可以用一个类来设置它的样式。

我为你整理了一个 fiddle :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');
                }
            });
        }
    });
});

注意我做了一个selected和selection类。如果用户点击太快，这种双重分类可以防止魔法崩溃。如果用户点击太快，仍然会有双背景动画。如果您使动画速度更快，它就会变得不那么明显。

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