想象一下ul和li's,当选中时,li会突出显示,例如
li.selected { background-color: Yellow; }
是否有一种方法可以使背景动画/移动到选定的项目?
为了更好地解释我想要什么,请参阅这个链接
http://jsfiddle.net/BVaV4/1/
试着点击项目,我想让背景动画就像这样(但不要看到代码,我作弊了)
是否有一个简单的方法来做到这一点使用jQuery和CSS?肯定有人这么做了吧?
我知道你想要动画的"真实的"背景,但这是不可能的方式,你想要它。html元素的"背景"直接位于元素的后面。你可以用background-position:
来改变它的位置,但如果它跨出元素,它将被剪辑。
每个html元素都有一个背景,它们是独立的,你不能在它们之间按你想要的方式进行动画。不仅背景不能离开它的元素,而且jQuery动画基本上是改变一个元素的属性,而不是"合并一个"到另一个。
所以要达到你想要的,你需要一个替代品。似乎你已经找到了它:你在给定的元素下做了一个<div>
,而不是使用它的背景属性,你使用那个<div>
。
你可以说这是作弊,但你所做的并没有那么糟糕,你只需要把它包起来,因为螺丝钉已经挂出来了。
你可以选择"真正的"背景,并将其替换为你想要的行为方式。
你可以制作一个jQuery插件- 可以应用于列表
- 检查所选对象的背景(宽度,高度,颜色等),你需要以某种方式标记所选项目(例如,通过给它一个。highlight类)。
- 用具有相似属性的div替换所选对象的背景
- 当点击另一个项目时,它将选择移动到被点击项目的位置,并复制其他项目的(宽度,高度)。
我们的目标是保持html和css的干净,从任何表明将有一个插件使用,并修改html的javascript。
有可能已经有一个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');
}
});
}
});
});
注意,我已经创建了一个selected和selection类。如果用户点击太快,这种双重分类可以防止魔法崩溃。如果用户点击太快,仍然会有双重背景动画。如果你使动画更快,它将不那么可见。
你可以让动画与jQuery.queue()
更一致,通过将所有动画和类切换到相同的队列,但我不是动画魔术师,我需要更多的时间来弄清楚如何(按顺序为不同元素动画似乎很棘手)。
要移动背景(没有动画),您必须只"选择"最后单击的项目,并首先取消选择所有其他项目。
$(function(){
$('li').click(function(){
$(this).siblings("li").removeClass("selected");
$(this).addClass("selected");
});
});
为了更好的效果,你可以稍微改进一下你的样式
li.selected { background: #cdf; }
li:hover { color:#f96; }
另一种可能性是在背景中使用css精灵,并以1/15秒的间隔设置计时器。但如果动画很复杂所需的BKG图像可能会变得相当大
我修改了第一个小提琴,以便在这里向您展示如何操作。
jQuery:$(function(){
$('li').click(function(){
$('.highlight').animate({'top': (18 + $(this).index() * 18)+'px'},function() {
$('.highlight').css({'display': 'block'});
});
});
});