JQuery UI Clip effects is not working for positioning absolute
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_Map开发者_如何学Pythons_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
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:
<div style="position:absolute; top:200px; left:200px;">
<img id="effect" src="http://w.ws.static.wireshark.net/image/wsbadge64.png" />
</div>
加载中,请稍侯......
精彩评论