我正在尝试创建一个粘贴标题,在页面滚动时会改变大小。 我想要实现的一个主要功能是标题中的图像缩小并向左移动。
到目前为止,我已经缩小了所有动画效果。 我也向左移动,但它没有动画。
在jQuery中我正在调用
$('#page_header_logo_img').css({
"padding-left":"20%",
"display":"inline"
})
一次然后再打电话
$('#page_header_logo_img').css({
"padding-left":"0",
"display":"block"
})
将它移动到我想要的位置时效果非常好......唯一的问题就是跳到那里。
我尝试合并jQuery Animate效果,但无法使其发挥作用。
Here is a JSFiddle of what I currently have 我所需要的只是让左右移动平稳而不是瞬间。
编辑答案
我接受了让我最接近的答案,并回答了我问的问题。 然而,它并没有让我得到我想要的东西,所以我想在这里发布最终解决方案。
我将图像更改为position: absolute;
,然后动态设置边距和左边属性。
答案 0 :(得分:3)
您可以考虑使用CSS过渡。
向transition: padding-left 0.3s ease-in-out;
的样式添加#page_header_logo_img
会在向左移动时为其设置动画过渡。
请参阅JSFiddle中的here。它不是很精致,但您可以看到如何使用CSS转换。
有关CSS过渡的更多信息,请参阅this。
答案 1 :(得分:1)
如果您想要动画效果,可以使用public class MobileArrayAdapter extends ArrayAdapter<BizForumArticleInfo> {
private Activity activity;
private ArrayList<BizForumArticleInfo> lPerson;
private static LayoutInflater inflater = null;
public MobileArrayAdapter (Activity activity, int textViewResourceId,ArrayList<BizForumArticleInfo> _lPerson) {
super(activity, textViewResourceId, _lPerson);
try {
this.activity = activity;
this.lPerson = _lPerson;
inflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
} catch (Exception e) {
}
}
public int getCount() {
return lPerson.size();
}
public BizForumArticleInfo getItem(BizForumArticleInfo position) {
return position;
}
public long getItemId(int position) {
return position;
}
public static class ViewHolder {
public TextView display_name;
public TextView display_number;
}
public View getView(int position, View convertView, ViewGroup parent) {
View vi = convertView;
final ViewHolder holder;
try {
if (convertView == null) {
vi = inflater.inflate(R.layout.list_mobile, null);
holder = new ViewHolder();
holder.display_name = (TextView) vi.findViewById(R.id.label);
vi.setTag(holder);
} else {
holder = (ViewHolder) vi.getTag();
}
holder.display_name.setText(lPerson.get(position).getArticleTitle());
} catch (Exception e) {
}
return vi;
}
}
代替.animate()
,但可以使用.css()
,因为display
在display
中不起作用。
休息功能就像这样
.animate()
答案 2 :(得分:-1)
您只是在改变CSS属性,因此有一个跳跃。
使用jQuery .animate()方法进行平滑过渡。更改您的代码如下。
$('#page_header_logo_img').animate({
"padding-left": "20%",
"display": "inline"
})
和
$('#page_header_logo_img').animate({
"padding-left": "0",
"display": "block"
})