Question

我使用了一个非常简单的画廊：

$('#thumbs img').click(function(){
$('#mainimg img').attr('src',$(this).attr('src').replace('thumb','large'));
});

但是当我添加fadein + fadeout时，当点击缩略图时图像消失或者同一图像淡出然后又回来了所以我确定我几乎在那里但需要指向正确的方向...我怎么得到以前的图像为淡出，新点击的图像是否为fadein？

Answer 1

这是因为fadeIn()和fadeOut()使用了opacity，因此您的图像变得“隐身”。

如果你需要淡出和淡入，你可以使用回调函数来设置不透明度。

$('*').fadeOut('slow', function() {
    $(this).css({
        'opacity' : 1,
        'display' : 'block'
    });
});

或者只是将fadeIn()放在fadeOut()上，我认为第二个更好：

$('*').fadeOut('slow', function() { $(this).fadeIn(); });

您应该以这种方式更改代码：

/**
 * binding 'click' event I would advice you to use not .click(function(e) {}) but .live('click', function(e) {});
 * difference is that, if you load via AJAX, or construct another element by javascript, and append it to the DOM
 * your trigger wouldn't work, because it's runs binding only on page load, and if the page changes
 * it wouldn't bind trigger to the new elements, how does this .live('click', function(e) {});
 */
$('#thumbs img').click(function(){ 
    var img = $(this); // storing image, that was clicked
    $('#mainimg img').fadeOut('slow', function() { // fading out mainframe image
        // linking the callback function on when the main image if faded out
        $(this).attr('src', img.attr('src').replace('thumb','large')); // when image is already invisible, changing the source of the image
        $(this).fadeIn('slow'); // fade in mainframe image again
    });
});

如果我找到你，那会导致主图像淡出，更改来源，同时淡化将大图像加载为src。

Answer 2

您应该等到图片加载完毕然后再淡入新图片。

$('#thumbs img').click(function(){

  //fade out here

  var img = new Image(),
      src = $(this).attr('src').replace('thumb','large');

  img.load = function(){

    //End animation on container if necessary
    $('#mainimg img').attr('src', src);
    //Start fadeIn

  }

  $(img).attr('src', src);
});

Answer 3

devdRew使用回调的想法是一种选择。您还可以链接settimeout调用，以便在用户单击图像并按照您希望的方式对其进行排序时启动一系列事件。

jquery图片库fadeIn＆amp; fadeOut问题

3 个答案: