Question

好的，让我们看看我是否可以正确解释这一点。

我正在编写自己的jQuery照片库。它使用AJAX加载库的内容，调用Web方法，该方法返回一个字符串，该字符串是一个填充了包含数据的JSON对象的数组（即文件名和图像的文件路径以及图像的文件路径＆＃39 ; s缩略图）传递给它的文件夹中的每个文件。

喜欢＆＃39; a so：

$(".Title").click(function (e) {

    Populate($(this).text());

    function Populate(folder) {

        $.ajax({
            type: "POST",
            url: "Filenames.asmx/GetFiles",
            contentType: "application/json; charset=utf-8",
            data: '{ "folderName" : "'+folder+'"}',
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            }   
        });
    }
    ...//more code follows

无论如何，我们有OnSuccess()函数：

function OnSuccess(response) {
    var $thumbs = $('#Gallery_Top .viewPane .thumbPanel');
    images = $.parseJSON(response.d);

   $thumbs.children().each(function () {
        //$(this).animate({ 'width': '0px', 'opacity': '0' }, 500).remove();
        $(this).transition({ opacity: 0 }).remove();
    });

    //make sure the thumb reel resets to its original position
    $thumbs.css('left', '0px');
    for (var i = 0; i < images.length; i++) {
        InsertHTML(images[i].thumbHref);
    }               
}

到目前为止一切顺利。

在InsertHTML()函数中，我必须做一些事情......

function InsertHTML(data) {
    //create the thumbnail image
    var $thumb = $('<img src="' + data + '" alt=""/>');

    //set its default class to inactive
    $thumb.addClass('inactive');

    //bind a function to the thumbnail's click event
    $thumb.bind("click", function () {
        //make sure we have the current image assigned
        //for navigation purposes.
        $currentImage = $(this);

        //remove the main image from the viewing pane
        $('#Gallery_Top .viewPane .mainImage .showImage').children().animate({'opacity':'0'},500,'easeOutSine').remove();

        //set all of the thumbnails to inactive
        $(this).parent().children().each(function () {
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                $(this).addClass('inactive');
            }
        });

        //set the clicked thumbnail active
        $(this).addClass('active');

        //get the URL for the related image
        var href = data.replace('Thumbs\\', '');
        href = href.replace('_thumb', '');
        var $image = $('<img src="' + href + '" alt=""/>');
        $image.addClass('mainImg');

        $('#Gallery_Top .viewPane .mainImage .showImage')
            .append($image)
            .animate({ 'opacity': '1' }, 500, 'easeInSine');

    });
    $('#Gallery_Top .viewPane .thumbPanel').append($thumb);

}

好的，无论如何，在我第一次点击缩略图之后，每次过渡都没有起作用。我第一次点击缩略图时，照片会很好地消失。在此之后，根本没有过渡。

将我的头发扯了大约3个小时试图找到方法。

顺便说一下，这里有一些CSS。

.mainImg{
    display: block;
    width: 75%;
    height: 75%;
    margin: 0 auto;
    margin-top: 150px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

Answer 1

我认识的EUREKA成功。

它永远不会失败。我把头撞到墙上三四个小时，努力不要来这里问问，然后半小时后我终于崩溃并问了一个问题，我弄明白了。这可能是因为不知道该怎么做而感到羞耻。

                    var $image = $('<img src="' + href + '" alt=""/>');
                    $image.on('load', function () {
                        $(this).animate({ 'opacity': '1' }, 500, 'easeOutSine');
                    });
                    $image.addClass('mainImg');
                    $image.css('opacity', '0');
                    $('#Gallery_Top .viewPane .mainImage .showImage').append($image);

动态内容 - 转换不起作用

1 个答案: