Question

我正在尝试创建一个粘贴标题，在页面滚动时会改变大小。我想要实现的一个主要功能是标题中的图像缩小并向左移动。

到目前为止，我已经缩小了所有动画效果。我也向左移动，但它没有动画。

在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;，然后动态设置边距和左边属性。

You can see a working JSFiddle here

Answer 1

您可以考虑使用CSS过渡。

向transition: padding-left 0.3s ease-in-out;的样式添加#page_header_logo_img会在向左移动时为其设置动画过渡。

请参阅JSFiddle中的here。它不是很精致，但您可以看到如何使用CSS转换。

有关CSS过渡的更多信息，请参阅this。

Answer 2

如果您想要动画效果，可以使用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()

Answer 3

您只是在改变CSS属性，因此有一个跳跃。

使用jQuery .animate()方法进行平滑过渡。更改您的代码如下。

$('#page_header_logo_img').animate({
  "padding-left": "20%",
  "display": "inline"
})

和

$('#page_header_logo_img').animate({
  "padding-left": "0",
  "display": "block"
})

内联显示动画以阻止更改

3 个答案: