Css and Jquery Animation

后端 未结 2 1353
死守一世寂寞
死守一世寂寞 2021-02-06 13:33

What I\'m trying to achieve is this animation

\"enter

Link to the animation is Mat

2条回答
  •  醉梦人生
    2021-02-06 13:54

    This may help you: http://jsfiddle.net/holp/vkgLdv38/1

    CSS

    @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
    .product-list { list-style: none; padding: 0 }
    .product-list  * { font-family: 'Source Sans Pro', sans-serif; }
    .product-list li {
        width: 200px;
        float: left;
        margin: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        background-color: #fff;
        overflow: hidden;
        cursor: pointer;
    }
    .product-list li div {
        width: 200px;
        height: 200px;
        z-index: 10;
    }
    .product-list li h3 {
        margin: 10px;
        z-index: 1;
    }
    .product-list li p {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin: 10px;
        height: 20px;
        z-index: 1;
    }
    .place {
        visibility: hidden;
    }
    

    HTML

    • Pinapple

      Pellentesque mattis vestibulum semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ullamcorper lorem lacus, a mattis nibh scelerisque in. Ut non purus dignissim, tristique sem in, pretium tortor. Integer tempus ut sapien sit amet porttitor.

    • Grape

      Curabitur ullamcorper, nibh ac faucibus varius, felis nisl lacinia tellus, a mattis tellus augue in urna. Phasellus ac ornare nisi. Aliquam aliquet facilisis vulputate. Nullam accumsan orci quis lorem cursus, at luctus mauris sagittis.

    • Blueberry

      Mauris quis pharetra nunc. Nulla pretium diam eros, nec congue diam tempor sed. Quisque hendrerit risus a augue ultrices imperdiet. Ut non purus dignissim, tristique sem in, pretium tortor. Integer tempus ut sapien sit amet porttitor.

    • Strawberry

      Aliquam a semper orci. Integer dictum lacus a tellus porta hendrerit. Mauris vel est pretium, gravida eros quis, dignissim massa. Integer mollis vitae enim sit amet mattis. Ut non purus dignissim, tristique sem in, pretium tortor. Integer tempus ut sapien sit amet porttitor.

    JS

    chosen = null;
    
    $('li').click(function() {
    
        var object = $(this);
        var margin = object.css('margin').replace(/[^-\d\.]/g, '');
        var scroll = $(window).scrollTop();
    
        if (chosen == null) {
    
        var ft = ($(window).height() / 2) - (300 / 2) - margin; var fl = ($(window).width() / 2) - (600 / 2) - margin;
    
        $('.product-list li').not(this).css('cursor','default');
        object.clone().insertAfter(object).addClass('place');
        object.css({'position':'fixed','top': object.offset().top - margin - scroll,'left': object.offset().left - margin}).animate({'top':ft, 'left':fl,'width':'600px','height':'300px'});
        object.children('div').animate({'width':'300px','height':'300px'});
        setTimeout( function(){
            object.children('div').css({'position':'absolute','top':'0','left':'0'});
            object.children('h3').css({'position':'absolute','top':'0','left':'0'}).animate({'left':'300px'});
            object.children('p').css({'position':'absolute','top':'40px','left':'0','white-space':'normal','width':'280px','height':'240px'}).animate({'left':'300px'});
        },300);
        chosen = this;
    
    
        } else if (chosen == this) {
    
        var ph = $('.place'); var pht = ph.offset().top - margin - scroll; var phl = ph.offset().left - margin; var phw = ph.width(); var phh = ph.height();
    
        object.children('p').animate({'left':'0'});
        object.children('h3').animate({'left':'0'});
        setTimeout( function(){
            object.children('p').removeAttr('style');
            object.children('h3').removeAttr('style');
            object.children('div').css({'position':'','top':'','left':''}).animate({'width':'200px','height':'200px'});
            object.animate({'top':pht, 'left':phl,'width':phw,'height':phh});
            setTimeout( function(){
                object.children('p').removeAttr('style');
                object.children('h3').removeAttr('style');
                object.children('div').css({'width':'','height':'','left':''});
                ph.remove();
                object.removeAttr('style');
                $('.product-list li').not(this).css('cursor','');
                chosen = null;
            },500);
        },300);
    
        }
    });
    

提交回复
热议问题