我正在按照本教程制作像IKEA这样的动画:
http://static.buildinternet.com/live-tutorials/interactive-picture/index.html
我遇到的问题是,当有人在图像上盘旋而不是从左到右时,我想让信息从右向左展开。
以下是jsfiddle的一个示例: http://jsfiddle.net/NEHZU/1/
这是关于jsfiddle的代码:
CSS:
.more{ position:absolute; width:17px; height:17px; background:url('dim.png'); padding:2px; text-align:left; overflow:hidden; }
.more span{ position:absolute; left:32px; width:160px; padding:0px 0 0 0px; color:#000; font:bold 13px Lucida Grande, Arial, sans-serif; }
#test{ top:50px; left:213px;}
HTML:
<div class="more" id="test">
<a href="http://www.google.com"><img src="http://buzport.com/wp-content/uploads/2011/07/land-phone-17x17px.gif"/></a>
<span>random text</span>
</div>
JavaScript的:
$(".more").hover(function(){
$(this).stop().animate({width: '225px' },200).css({'z-index' : '10'});
}, function () {
$(this).stop().animate({width: '17px', height: '17px' }, 200).css({'z-index' : '1'});
});
更新了标题,表示从右到左,而不是从左到右
答案 0 :(得分:1)
你在找这个吗?
$(".more").hover(function(){
$(this).stop()
.animate({
width: '225px',
left: $(this).find('span').width()
}, 200)
.css({ 'z-index' : '10' });
}, function () {
$(this).stop()
.animate({
width: '17px',
left: '213px',
height: '17px'
}, 200)
.css({'z-index' : '1'});
});
答案 1 :(得分:0)
$(".etc").hide();
$(“。more”)。hover(function(){
$(".etc").animate({
"marginLeft": "-=80px"
}, 200);
$(".etc").show();
},function(){
$(".etc").animate({
"marginLeft": "+=80px"
}, 200);
$(".etc").hide();
});
你应该尝试与我的css玩一点,我不会,对不起那样:))