设置css后,无法使用'right'为div设置动画?

时间:2013-08-02 23:30:56

标签: javascript jquery

我的html的正文部分是

<div class="scrollin" id="topscrollin" style="left:-300px;top:30px;"></div>
<div class="scrollin" id="bottomscrollin" style="right:-300px;top:120px;"></div>

css部分是

.scrollin{
  background: #3300FF;
  height:60px;
  width:300px;
  text-align: center;
  color: #FFFFFF;
  font-family: Segoe UI;
  position: absolute;
  z-index: 3;
}

脚本部分是

 $(".scrollin").animate({scrollin:27},{
       step:function(now){
        $("#topscrollin").css('left',now+'%');
        $("#bottomscrollin").css('right',now+'%');
       }
     })

当他们点击其他按钮时

$("#topscrollin").animate({right:-300},1000);
               $("#bottomscrollin").animate({left:-300},1000);

第一个动画似乎有效。但第二个动画似乎不适用于topscrollin。当我搜索时,我发现它与初始设置左侧的位置有关。 我尝试使用该解决方案 http://jsfiddle.net/XqqtN/ 这是针对相反的情况。但它没有用。 `此外,如果将位置设置为左侧是问题,那么为什么第二种情况不会发生?

1 个答案:

答案 0 :(得分:1)

如何改为左右?对100%? http://jsfiddle.net/PRLnm/

$("#topscrollin").animate({left:'100%'},1000);
$("#bottomscrollin").animate({right:'100%'},1000);