标签穿梭框，飞出飞入效果

浏览：762次- 评论：0次- 发布时间：2018-06-27

Html

Css


     



    Hu
    Jim
    Lily
    Liming
    Sam
    Xiaomin
    Marry
    Jelly
    Bobo
    Mr.L
    Bill
    May
    Edison
    Eason
    W
    Ab
    Nic
    Tom
    JG
    Obama
    Vemo
    Yiroon
    Lisa
    S.W

$(function() {

var speed = 500;

function cloneto(obj, to) {
        if (obj.is(':animated')) {
            return false;
        }
        var clone = obj.clone();
        clone.css({
            opacity: 0
        });
        to.append(clone);

var scry = $(window).scrollTop();
        var scrx = $(window).scrollLeft();
        var tmpw = obj.outerWidth();
        var tmph = obj.outerHeight();
        var tmpx = obj.offset().left - scrx;
        var tmpy = obj.offset().top - scry;

var newx = clone.offset().left - scrx;
        var newy = clone.offset().top - scry;

var anier = obj.clone();
        $('body').append(anier);

obj.fadeOut(function() {
            $(this).remove();
        });

anier.css({
            position: "fixed",
            left: tmpx + 'px',
            top: tmpy + 'px'
        }).stop(false, true).animate({
            left: newx + 'px',
            top: newy + 'px'
        }, speed, function() {
            $(this).remove();
        });

setTimeout(function() {
            clone.css({
                opacity: 1
            });
        }, speed);

}

$('.btnselectAll').click(function() {
        $('.fromlist label').each(function() {
            cloneto($(this), $('.tolist'));
        });
    })
    $('.btnclearAll').click(function() {
        $('.tolist label').each(function() {
            cloneto($(this), $('.fromlist'));
        });
    });

$('body').on('click', '.fromlist label', function() {
        cloneto($(this), $('.tolist'));
    })
    $('body').on('click', '.tolist label', function() {
        cloneto($(this), $('.fromlist'));
    })
})

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：原位飞入目标位置过程动画

点击标签，会从原位置飞入（动画效果）下面的框。

在做客户一个选学生的功能时做的，如果你要获取已选的值，可以用自己的方法哈，方法很多，自己多想想~

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取