时间戳

首页 > 解决方案 > Jquery stop image blink before fade out

javascript - Jquery stop image blink before fade out

问题描述

I have below given jquery function to show images in lightbox image carousal. It is working fine except, when the user click on next navigation button to see next image, the present image blinks once and then next image is shown. I want to remove this image blink before fade out and want to achieve smooth fade out effect. How to do this?

function view_post(id, nav) {
    var viewer = $("#post-viewer");
    var userid = '';
    var page = '';
    if (nav != undefined && nav) {
        var lists = $(".post-list");
        userid = lists.data('userid');
        page = lists.data('page');
    }
    showLoader();
    $.ajax({
        url : baseUrl + 'post/load?id=' + id,
        data : {userid:userid,page:page},
        success: function(t) {
            viewer.find('.content').html(t);
            viewer.fadeIn();
            viewer.find('.close').click(function() {
                viewer.fadeOut();
                viewer.find('.content').html('');
                return false;
            })
            viewer.find('.cover').click(function() {
                viewer.fadeOut();
                viewer.find('.content').html('');
    var url = baseUrl;
    var title = 'Title';
if (typeof (history.pushState) != "undefined") {
        var obj = { Title: title, Url: url };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        alert("Browser does not support HTML5.");
    }
                return false;
            })
            hideLoader();
            reload_init();
        }
    });
    return false;
}

标签： javascriptjquery

解决方案

查看您的代码，您正在尝试查看fadeIn似乎已经可见的图像，这意味着不透明度将从 0->100 变为淡入，从而导致闪烁。

如果您在navigate_post例程中更改以下行，您应该已准备就绪。

navigate_post(l, type) {
    ...
    container.find('.image').hide();
    container.find('.image-' + imageToLoad).show();
    return false;
}

即.fadeIn()->.show()

推荐阅读