Переход изображения по щелчку мыши

Я реализую галерею изображений, в которой, если вы нажмете на изображение, вы увидите увеличенное изображение. Тем не менее, я пытаюсь сделать так, чтобы изображение переходило из того, которое в данный момент отображается на экране. Код, который я в настоящее время выглядит следующим образом:Переход изображения по щелчку мыши

$('.box8').click(function(){ 
    $('#myMainPicture').animate({ 
     opacity:'toggle'}, 1000, 'linear', function() { 
      $('#myMainPicture').attr("src", "thmb/pics/7.jpeg"); 
     }); 
    }); 

$('.box2').click(function(){ 
    $('#myMainPicture').animate({ 
     opacity:'toggle'}, 1000, 'linear', function() { 
      $('#myMainPicture').attr("src", "thmb/pics/1.jpeg"); 
     }); 
    }); 

});

Когда я нажимаю на элемент .box8 текущего элемента изображения #myMainPicture красиво исчезает, как диктуемого значение «пуговица», независимо от того, что в настоящее время существует на экран. Если я сейчас снова нажму, он покажет мне изображение, определенное в атрибуте src.

То же самое относится к элементу .box2.

Однако существует ли способ анимировать всю эту последовательность, так что разгрузка старого изображения и загрузка нового происходит одним щелчком мыши, а мне нужно дважды нажимать мышь?

Большое спасибо,

vnayak

источник

2013-05-19 user2280642

Try разделить код в повторно используемые функции.

function animateTransition($image, newSrc){ 
    $image.animate({ 
     opacity:'toggle'}, 1000, 'linear', function() { 
      if(newSrc){ 
      $image.attr("src", newSrc); 
      animateTransition($image,null); 
      } 
    }); 
}; 
$('.box').on('click',function(){ 
    animateTransition($('#myMainPicture'),'thmb/pics/7.jpeg'); 
});

источник

2013-05-19 12:20:00

Привет, Пол, Спасибо за код. Я реализовал это и отлично работает. Однако, просто для того, чтобы помочь моему пониманию того, что здесь происходит, было бы возможно, если бы вы могли объяснить мне роль if (newSRC) {...} в выполнении этой работы. – user2280642

Нет проблем, функция имеет рекурсивный вызов. Причина этого в том, что функция переключает непрозрачность. Поэтому я хочу назвать это дважды, но только один раз установите источник. Поэтому я называю это источником, он исчезает, устанавливает новый источник, а затем снова вызывает функцию без источника. Он исчезает, но поскольку новый источник (newSrc) имеет значение NULL, он больше не будет вызывать функцию. if (newSrc) является false, если newSrc равно null. –

Большое спасибо за это, Пол! Это все ясно. – user2280642

Вы можете комбинировать оба анимации в один клик, как показано в следующем примере:

$(document).ready(function() { 
    var images = $('img.box'), 
     main = $('#myMainPicture'); 
    main.prop("src", $(images[0]).attr('src')); // initialize main image 
    images.click(function() { 
     var src = $(this).attr('src'); 
     main.stop().animate({ 
      opacity: 0 // fade out 
     }, 1000, 'linear', function() { 
      main.prop("src", src); 
      main.animate({ opacity: 1 }); // fade in 
     }); 
    }); 
});

jsfiddle

источник

2013-05-19 13:13:20 Stano

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

$.fn.animateTransition = function(callback,newsrc){ 
    var done = 0; 
    var nb = this.length; 
    function endAnim(){ if(++done === nb && callback !== undefined) callback(); } 
    this.each(function(){ 
     var $t = $(this); 
     var src = newsrc; 
     if(src === undefined || src === false) 
      src = $t.data("src"); 
     if(src === undefined || src === "") 
      return endAnim(); 
     $t.animate({opacity:0},1000,'linear',function(){ 
      $t.attr("src",src).animate({opacity:1},1000,'linear',endAnim); 
     }); 
    }); 

    return this; 
};

http://jsfiddle.net/r043v/DhBvW/2/

источник

2013-05-19 13:23:43 r043v

Переход изображения по щелчку мыши

ответ

Смежные вопросы