http://jsfiddle.net/hashie5/ZKwA6/
我的链接现在滑到右边,但它们没有对齐。我需要一个带有text-align:right
or的动画float:right
。此外,当您离开链接时,文本应再次左对齐。
http://jsfiddle.net/hashie5/ZKwA6/
我的链接现在滑到右边,但它们没有对齐。我需要一个带有text-align:right
or的动画float:right
。此外,当您离开链接时,文本应再次左对齐。
要右对齐,请使用上面的代码,然后更改
"left":"140"
和
"left": $(this).width() - $(this).find('a').width()
试试这个,ti应该可以工作。
$('document').ready(function() {
$('.menu td').hover(
function() {
var a = $(this).find('a').first();
a.css('position', 'relative')
.stop().animate({ left: $(this).width() - a.width()});
},
function() {
$(this).find('a').first().stop().animate({ left: 0 });
});
});
尝试悬停方法:
$('.menu td').hover(function() {
$(this).find('a').animate({
"left": "140"
}, 500);
},
function() {
$(this).find('a').animate({
"left": "0"
}, 500);
});
使用停止();
$('.menu td').hover(function() {
$(this).find('a').stop().animate({
"left": "140"
}, 500);
},
function() {
$(this).find('a').stop().animate({
"left": "0"
}, 500);
});
还不是你想要的,但如果你添加正确的类并删除它,它可能会看你想要的
$('document').ready(function() {
$('.menu td').delegate('', 'mouseover', function() {
$(this).find('a').animate({
"left": "0",
}, 500);
$(this).addClass('right');
});
$('.menu td').delegate('', 'mouseout', function() {
$(this).find('a').attr('style', 'left:0;');
$(this).removeClass('right');
});
});
请注意,我将 Left 的动画设置为 0... 你可以在这个fiddle中找到
小提琴只显示左/右,我想你想把它动画到右边。但是通过更改对齐方式从左到右对其进行动画处理可能需要一些额外的计算
编辑:添加了答案的组合,因为它们都显示了一个解决方案
$('document').ready(function() {
$('.menu td').delegate('', 'mouseover', function() {
$(this).find('a').stop().animate({
"left": $(this).width() - $(this).find('a').width()
}, 500);
});
$('.menu td').delegate('', 'mouseout', function() {
$(this).find('a').stop().animate({
"left": "0",
}, 500);
});
});
致谢:Alex Ball、Raminson、Esailija