Question

我有一个绝对定位的图像，我想对它应用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/

有什么想法我怎么能实现这个目标？

由于萨赫勒

Answer 1

经过一些测试后，我发现它是正在播放的“顶级”属性。解决方法是将<img>包围在另一个元素中，例如<div>，并将定位委托给该父元素：

<div style="position:absolute; top:200px; left:200px;">
    <img id="effect" src="http://w.ws.static.wireshark.net/image/wsbadge64.png" />
</div>

JQuery UI Clip效果不适用于绝对定位

1 个答案: