0

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

li.selected { background-color: Yellow; }

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

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

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

4

4 回答 4

2

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

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

所以要实现你想要的，你需要一个替代品。看来您已经找到它了：您<div>在给定元素下创建了 a ，而不是使用它的背景属性，而是使用 that <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()，但我不是动画魔术师，我需要更多时间来弄清楚如何（按顺序制作不同的元素动画似乎变得棘手）。

于 2013-05-02T07:40:22.203 回答
0

For moving the background (without animation) you have to "select" only the last clicked item, and deselect all the others first.

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

for a better effect you might refine a bit your styling

li.selected { background: #cdf; }
li:hover { color:#f96; }
于 2013-05-02T07:41:00.653 回答
0

I modified the first fiddle to show you how to do it here.

jQuery:

$(function(){
    $('li').click(function(){
        $('.highlight').animate({'top': (18 + $(this).index() * 18)+'px'},function() {
    $('.highlight').css({'display': 'block'});
  });   
    });
 });
于 2013-05-02T08:22:42.770 回答
0

Another possibility is to use css sprites put in the background and have a timer animate it at 1/15 sec intervals.. but if the animation is complex the required bkg image could become quite big

于 2013-05-03T10:19:29.240 回答