Почему этот простой эффект передачи JQuery не работает? - PullRequest
Новая
       8

Почему этот простой эффект передачи JQuery не работает?

1 голос
/ 17 ноября 2010

код html тела: 

<div style="background:yellow;width:500px;height:300px;">
    <div id="div1" style="background:red; width:100px;height:100px; float:left;"></div>
    <div id="div2" style="background:blue; width:50px;height:50px; float:right;"></div>
</div>

тогда js код: 

 $(function () {
        $("#div1").click(function () {
            $(this).effect("transfer", { to: $("#div2") }, 1000);
            //$(this).effect("shake", { times: 2 }, 200);
        });
    });

конечно, я импортирую 

<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>

вы можете увидеть плохое онлайн : http://jsfiddle.net/hh54188/wz2J3/

приведенный ниже эффект «встряхивания» может работать, но передача не работает Итак, как решить проблему? Спасибо

Ответы [ 2 ]

7 голосов
/ 17 ноября 2010

из http://docs.jquery.com/UI/Effects/Transfer

Элемент передачи iself имеет имя класса "ui-Effects-Transfer" и должен быть стилизован вами, например, путем добавления фона или рамки.

это в примере 

.ui-effects-transfer { border: 2px solid black; }
4 голосов
/ 17 ноября 2010

Это работает , просто нет класса / стиля, поэтому вы не видите границы, просто задайте любой класс, который вы хотите, в качестве опции className, и дайте этому классу границу и т. Д.. независимо от того, каким вы хотите, чтобы он выглядел. 

$(this).effect("transfer", { to: "#div2", className: "myClass" }, 1000);

Со стилем для этого класса: 

.myClass { border: 2px dotted gray; }

Вы можете просмотреть демо, обновленное с этими изменениями здесь .

...