Jquery 使用jScrollPane查找图像的位置

我有一个包含在jScrollPane中的图像列表，当您单击图像时，会出现一些奇特的裤子动画。问题是我需要从屏幕顶部获取图像的位置。在不使用jScrollPane但使用位置不变的情况下，我可以轻松地使用jQuery实现这一点。如何在jScrollPane中找到图像相对于移动的位置

下面是一个如何在屏幕上显示图像的示例。它只是没有使用jscrollpane

我想这就是我需要解决这个问题的方法，但我不确定。

我是如何构建图像的

  grid = $('#grid'),
  str = '';

  grid.empty();
  $.each(main_images,function(i,v){
   str += '<li gallery="'+i+'"><div class="title">'+(content.navgrid[2][i].title )+'</div><a ng-href="#" class="zoom"><img src="'+main_images[i]+'"/><span></span></a></li>';
});
  grid.append($(str));

  grid.jScrollPane({hideFocus:true});

grid=$（“#grid”），
str=''；
grid.empty（）；
$。每个（主图像、功能（i、v）{
str+='
”+（content.navgrid[2][i].title）+'
'；
});
grid.append（$（str））；
jScrollPane（{hideFocus:true}）；

我想如果您想要单击元素的顶部，那么这是可能的

 var position = $(this).offset().top;

---

我不确定这是不是你想要的

不知道你想用你的动画材料做什么，你需要更好地解释这一点，或者用一个JSFIDLE更新它来显示你的问题

我为您创建了一个简单的JSFIDLE，您可以看到如何在jpane中滚动到单击元素的位置。您可以在此处的文档中找到所需内容：

小提琴：

我建议你像这样简单地开始，然后在上面添加你想要的额外动画。在jpane中验证animate（）函数并将其替换为高级动画，或者只需使用并调用

api.reinitialise（）如果更改或隐藏动画中的DOM元素，并希望更新jpane可滚动区域

编辑
从jpane的源代码粘贴：

// This method is called when jScrollPane is trying to animate to a new position. You can override
// it if you want to provide advanced animation functionality. It is passed the following arguments:
//  * ele          - the element whose position is being animated
//  * prop         - the property that is being animated
//  * value        - the value it's being animated to
//  * stepCallback - a function that you must execute each time you update the value of the property
// You can use the default implementation (below) as a starting point for your own implementation.
animate: function(ele, prop, value, stepCallback)
{
    var params = {};
    params[prop] = value;
    ele.animate(
        params,
        {
            'duration'  : settings.animateDuration,
            'easing'    : settings.animateEase,
            'queue'     : false,
            'step'      : stepCallback
        }
    );
}

你说的“用jscrollpane查找位置”是什么意思？你可以说得更具体一点吗？在你的小提琴中，你的点击功能也可以与jScrollPane一起使用。在你有可能导致奇怪行为的相同ID/类名之前，它不会有任何问题。请根据实际需求提供更多详细信息。并在相同的上下文中更新了fiddle，该上下文可能为$（this）.offset.top？我认为offset（）.top将返回一个错误.PS。我的提琴会告诉你如何解决这个问题，你需要为你的jpane添加实际的div和正确的CSS。我现在就把它放在你的ul.grid上作为一个例子——由于你对元素的样式设计，它不能100%工作。
// This method is called when jScrollPane is trying to animate to a new position. You can override
// it if you want to provide advanced animation functionality. It is passed the following arguments:
//  * ele          - the element whose position is being animated
//  * prop         - the property that is being animated
//  * value        - the value it's being animated to
//  * stepCallback - a function that you must execute each time you update the value of the property
// You can use the default implementation (below) as a starting point for your own implementation.
animate: function(ele, prop, value, stepCallback)
{
    var params = {};
    params[prop] = value;
    ele.animate(
        params,
        {
            'duration'  : settings.animateDuration,
            'easing'    : settings.animateEase,
            'queue'     : false,
            'step'      : stepCallback
        }
    );
}