Question

function showImage() {
    var toggleImage = document.getElementById("loadingImage");
    if(toggleImage.style.display == "inline") {
        document.getElementById('loadingImage').style.display='none';
    } else {
        document.getElementById('loadingImage').style.display='inline';
        document.getElementById('loadingImage2').style.display='none';
        document.getElementById('loadingImage3').style.display='none';
        document.getElementById('loadingImage4').style.display='none';
    }
}

<img class="TeamMembersPictures" `enter code here`src="http://www.ishop247.co.uk/TeamPictures/Yvonne.jpg" onclick="showImage();"/>

<img id="loadingImage" src="http://www.ishop247.co.uk/TeamPictures/YvonneBG.jpg" style="display:none"/>

这是我必须在点击另一张图片时显示新图像的代码，但我想要的是它可以平滑地向下滑动显示在屏幕上的图像

Answer 1

更好的是，为什么不使用CSS动画？查看Animate.css（我没有联盟），它允许您只需在页面顶部包含css文件，然后执行类似的操作......

<img src="whatever.png" class="animated bounceInDown"/>

你可以在这里下载css ......

http://daneden.github.io/animate.css/

Answer 2

要使用jQuery向下滑动元素，您需要slideDown函数。例如：

function showImage() {
    $('#loadingImage').slideDown();
}

正如您从slideDown文档的链接中所看到的，您可以通过多种方式自定义幻灯片。

function showImage() {
    $('#loadingImage').slideDown({
        duration: 400,
        easing: 'swing',
        queue: true,
        specialEasing: {/*key: value...*/},
        step: function(now, tween) {
            // ...
        },
        progress: function(animation, progress, remainingMs) {
            // ...
        },
        complete: function() {
            // ...
        },
        start: function(animation) {
            // ...
        },
        done: function(animation, jumpedToEnd) {
            // ...
        },
        fail: function(animation, jumpedToend) {
            // ...
        },
        always: function(animation, jumpedToend) {
            // ...
        }
    });
}

如果您不需要太多，那么该功能会有一些较小的变化（所有参数都是可选的）：

$('#loadingImage').slideDown(400, function() {
    // complete...
});

$('#loadingImage').slideDown(400, 'swing', function() {
    // complete...
});

核心jQuery仅为缓动值提供'swing'和'linear'。诸如jQuery UI之类的插件可以提供其他值。持续时间可以是数字（以毫秒为单位）或字符串（'fast' = 200毫秒或'slow' = 600毫秒）。

出现时向下滑动图像

2 个答案: