内联显示动画以阻止更改

时间:2016-07-05 10:39:37

标签: javascript jquery css

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

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

在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

3 个答案:

答案 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(),因为displaydisplay中不起作用。

休息功能就像这样

.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"
})