JQuery UI 剪辑效果不适用于绝对定位
我有一个绝对定位的图像，我想对其应用 jquery 剪辑效果。但我很难实现预期的行为。
下面我粘贴了我正在尝试的代码。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script>
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = "clip";
// most effect types need no options passed by default
var options = { direction : "vertical" };
// run the effect
$( "#effect" ).hide( selectedEffect, options, 500);
};
// set effect from select menu value
$( "#t" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div id="images">
<img id="effect" src="Google_Maps_Icon.png" style="position:absolute; top:200px; left:200px;"/>
<a id="t" href="#">click</a>
</div>
</body>
</html>
jquery UI 网站上提到了预期行为： http://jqueryui.com/demos/effect/
有什么想法我该如何实现这一目标？
谢谢 萨希尔
I have an image which absolutely positioned and I would like to apply jquery clip effect on it. But I am having trouble to achiever the expected behavior.
Below I have pasted the code which I am trying.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script>
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = "clip";
// most effect types need no options passed by default
var options = { direction : "vertical" };
// run the effect
$( "#effect" ).hide( selectedEffect, options, 500);
};
// set effect from select menu value
$( "#t" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div id="images">
<img id="effect" src="Google_Maps_Icon.png" style="position:absolute; top:200px; left:200px;"/>
<a id="t" href="#">click</a>
</div>
</body>
</html>
Expected Behavior is as mentioned on jquery UI website:
http://jqueryui.com/demos/effect/
Any thoughts how can I achieve this ?
Thanks
Sahil
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
经过一些测试，我发现它是“top”属性正在发挥作用。解决方法是用另一个元素（例如
）包围![]()
After a bit of testing, I found it is the "top" property that is playing up. A workaround is to surround the
<img>by another element, e.g.<div>, and delegate the positioning to that parent element: