Question

我正在编写一个功能，可以在摄影师的网站上拍摄照片，但由于某种原因，我的功能无法正常工作。我需要隐藏图像，然后淡化，然后向下倾斜。功能很好但是当我添加隐藏它和.show（）时，图像不会显示自己。有人能帮助我吗？

<html>
    <head>
        <title>
            Black Pro Pix | Professional Photography
        </title>
        <meta charset="UTF-8">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="blackpropixfallen.css">
        <!-- Satisfy Google Font -->
        <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">

    </head>

    <body>
        <div class = "row">
            <div class = "col-xs-12">
                <div id = "fallenpictures" hidden>
                    <img src = "Fallenpictures/3's not too much of a crowd.jpg" id = "pic1" class = "row1" width = "30%" height = "35%">
                    <img src = "Fallenpictures/custommade (tron).jpg" id = "pic2" class = "row1" width = "30%" height = "35%">
                    <img src = "Fallenpictures/Dat Way (b&w 43).jpg" id = "pic3" class = "row1" width = "30%" height = "35%">
                    <img src = "Fallenpictures/Glow 15.jpg" id = "pic4" class = "row2" width = "30%" height = "35%">
                    <img src = "Fallenpictures/Interconnected.jpg" id = "pic5" class = "row2" width = "30%" height = "35%">
                    <img src = "Fallenpictures/LifeLongLies pt.2 (yellow).jpg" id = "pic6" class = "row2" width = "30%" height = "35%">
                    <img src = "Fallenpictures/Mornin' Murderin' Marauder (abstract).jpg" id = "pic7" class = "row3" width = "30%" height = "35%">
                    <img src = "Fallenpictures/Paris 15.jpg" id = "pic8" class = "row3" width = "30%" height = "35%">
                    <img src = "Fallenpictures/Somebody's Watching.jpg" id = "pic9" class = "row3" width = "30%" height = "35%">
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function(){
                fallingpictures();
            });
            function fallingpictures() {
                // Make pictures fall
                $("#pic1").show().delay( 560 ).animate({
                    "top": 360
                }, 3000);
                $("#pic2").show().delay(750).animate({
                    "top": 360
                },3000);
            }
        </script>
    </body>
</html>

Answer 1

尝试使用不透明度：它的范围是0-1.0，如果你想要半衰，那么就像这样使用，的不透明度：0.5

如何让我的图像在掉落之前显示淡入淡出？

1 个答案: