Галерея изображений jquery Проблемы с исчезновением и исчезновением - PullRequest
Новая
       21

Галерея изображений jquery Проблемы с исчезновением и исчезновением

0 голосов
/ 06 января 2012

Я сделал очень простую галерею, используя: 

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

, но когда я добавляю fadein + fadeout, либо изображения исчезают при нажатии на миниатюру, либо исчезает то же самое изображение, затем снова появляетсяя почти на месте, но нужно указывать в правильном направлении ... как получить предыдущее изображение, чтобы исчезнуть, и недавно щелкнутое изображение, чтобы исчезнуть, пожалуйста?

Ответы [ 3 ]

0 голосов
/ 06 января 2012

Вы должны подождать, пока изображение не будет загружено, и только затем исчезать в новом. 

$('#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);
});
0 голосов
/ 06 января 2012

Идея devdRew об использовании обратных вызовов является одним из вариантов. Вы также можете объединить вызовы времени ожидания, чтобы начать серию событий, когда человек нажимает на изображение, и упорядочивать их так, как вы хотите.

0 голосов
/ 06 января 2012

Это потому, что fadeIn() и fadeOut() используют opacity, поэтому ваше изображение просто становится "невидимым".

Если вам нужны постепенное исчезновение и постепенное исчезновение, вы можете использовать функцию обратного вызова для восстановления непрозрачности.1006 * 

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

Если я вас правильно понял, это приводит к исчезновению основного изображения, изменению источника и, в то же время, постепенному исчезновению при загрузке большого изображения в качестве источника.

...