简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
jquery - css3图片抖动
PHPz
PHPz 2017-04-17 11:32:49
0
3
938

我这个点击document弹出图片他会抖动，不知道是怎么回事？
要是把外层的sdf去了他又是正常的，要怎么改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .sdf{
            width:500px;
            height:500px;
            overflow:hidden;
            margin:200px auto;
            position:relative;
        }

       .outter{
            width:174px;
            height:155px;
            position:absolute;
            top:100px;
            left:200px;
            transition:all 1s ease;
       }
       .dd{
           background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);
            overflow:hidden;
            background-size:174px 155px;
            background-position:center center;
            transition:all 1s ease;
            width:0px;
            height:155px;
            margin:0 auto;
       }
    </style>
</head>
<body>
    <p class="sdf">
        <img class="lazy" src="http://img06.sephome.com/201602/D2D5B00588B8488496F37014622724F9.jpeg" src="http://img06.sephome.com/201602/D2D5B00588B8488496F37014622724F9.jpeg" width="100%" alt="" style="display: inline;">
        <p class="outter">
           <p class='dd'></p>
        </p>
    </p>
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
    <script>
        $(function() {

            $(document).on('click', function() {
               $(".dd").css({
                    'width':'174px'
               })
            });
            
        });
    </script>
</body>
</html>
PHPz
PHPz

学习是最好的投资！

reply all(3)
阿神
阿神2017-04-17 11:34:49 3 floor

[doge]
This does not involve css3 at all. Well, you just change the width of a p. The width of p originally occupied the position of 0. If you change its width through js, it will trigger the browser. redraw.

It is recommended to use transform:scale(0); to scale the element, and then restore transform:scale(1); after clicking, so that it will not trigger the browser to redraw.

Like +0
Add Reply
迷茫
迷茫2017-04-17 11:34:49 2 floor

Inspired by 1st Floor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .sdf{
            width:500px;
            height:500px;
            overflow:hidden;
            margin:200px auto;
            position:relative;
        }

       .outter{
            width:174px;
            height:155px;
            position:absolute;
            top:100px;
            left:200px;
            transition:all 1s ease;
       }
       .dd{
           background:url(http://www.ppt123.net/beijing/UploadFiles_8374/201203/2012032518062306.jpg);
            overflow:hidden;
            background-size:174px 155px;
            background-position:center center;
            transition:all 1s ease;
            transform: scale(0,1);
            width:174px;
            height:155px;
            margin:0 auto;
       }
    </style>
</head>
<body>
    <p class="sdf">
        <img class="lazy" src="http://img06.sephome.com/201602/D2D5B00588B8488496F37014622724F9.jpeg" src="http://img06.sephome.com/201602/D2D5B00588B8488496F37014622724F9.jpeg" width="100%" alt="" style="display: inline;">
        <p class="outter">
           <p class='dd'></p>
        </p>
    </p>
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
    <script>
        $(function() {

            $(document).on('click', function() {
               $(".dd").css('transform', 'scale(1, 1)');
            });
            
        });
    </script>
</body>
</html>
Like +0
Add Reply
左手右手慢动作
左手右手慢动作2017-04-17 11:34:49 1 floor

When you reduce the width, you just reduce it. It has nothing to do with jitter. . Speaking of which, the dithering I understand should not be an animation, transporting to the left first and then to the right?

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！