JQuery UI Клип эффекты не работают для позиционирования абсолютного - PullRequest
Новая
       5

JQuery UI Клип эффекты не работают для позиционирования абсолютного

0 голосов
/ 16 марта 2011

У меня есть абсолютно позиционированное изображение, и я хочу применить к нему эффект jquery clip. Но у меня возникают проблемы с достижением ожидаемого поведения.

Ниже я вставил код, который я пытаюсь. 

<!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/

Есть мысли, как мне этого добиться?

Спасибо Сахил

1 Ответ

0 голосов
/ 18 марта 2011

После небольшого тестирования я обнаружил, что это свойство "top" работает. Обходной путь должен окружить <img> другим элементом, например <div> и делегировать позиционирование этому родительскому элементу: 

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