jQuery的图片库淡入和淡出的问题

我已经做用一个非常简单的画廊：jQuery的图片库淡入和淡出的问题

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

但是当我添加淡入+淡出或者图像消失的缩略图被点击或相同的图像淡出则当回到如此确定我即将在那里，但需要指向正确的方向......我如何得到以前的形象淡出和新点击的图像淡出请吗？

来源

2012-01-05 John

这是因为fadeIn()和使用opacity，所以你的形象变得'隐形'。

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

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

或者只是把fadeIn()上，我觉得第二个是更好：

$('*').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时淡入。

来源

2012-01-05 20:27:05 devdRew

即时通讯相对较新的jQuery的你能不能告诉我用我的代码，但一个明显的例子修改？我仍然不确定在哪里放他们......谢谢 – John 2012-01-05 20:40:20

等一下......我会编辑帖子。 – devdRew 2012-01-05 20:42:29

你已经显示的方式有很大的意义..我敢肯定，当我在jQuery中尝试的东西，我使他们复杂化！我现在在工作，所以我稍后再尝试，让你知道。再次感谢。 – John 2012-01-05 21:06:38

您已经应该等待，直到图像加载，然后才淡入新的。

$('#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); 
});

来源

2012-01-05 20:27:55 Flops

问题是关于'淡入（）'和'淡出（）'... – devdRew 2012-01-05 20:29:28

对不起，我没有得到哪里出了问题。 :) – Flops 2012-01-05 20:35:03

devdRew使用回调的想法是一种选择。您也可以链接settimeout调用来启动一系列事件，一旦用户点击图像并按照您想要的顺序排列它们。

来源

2012-01-05 20:30:23 Tabrez

你能解释一下我的代码吗？没有问题，如果你没有时间:) – John 2012-01-06 09:00:03

我看到你已经接受了答案。它工作还是仍在寻求帮助？ – Tabrez 2012-01-06 12:11:35

jQuery的图片库淡入和淡出的问题

回答

相关问题