Эффект затухания - PullRequest
Новая
       41

Эффект затухания

2 голосов
/ 30 июля 2011

Мне нужна помощь jquery.У меня есть простая галерея изображений, и я хотел бы добавить некоторый эффект jquery (в частности, появление / исчезновение изображений в #actimg).Имейте в виду, я не очень знаком с JQuery.

js 

<script type="text/javascript">
function showPic (whichpic) {
  if (document.getElementById) {
  document.getElementById('actimg').src = whichpic.href; 
  return false; 
 } else {
  return true;
 } 
}
</script>

и тело 

<ul>
<li><a onclick="return showPic(this)" href="images/girl_01.jpg"><img height="50px" width="50px" src="images/girl_01.jpg" /></a></li>
<li><a onclick="return showPic(this)" href="images/girl_02.jpg"><img height="50px" width="50px" src="images/girl_02.jpg" /></a></li>
<li><a onclick="return showPic(this)" href="images/girl_03.jpg"><img height="50px" width="50px" src="images/girl_03.jpg" /></a></li>
</ul>

<img id="actimg" src="images/girl_04.jpg" alt="" />

Ответы [ 4 ]

1 голос
/ 30 июля 2011

попробуйте что-то вроде: 

$("li a").click(function(){
       $("#actimg").fadeOut();
        var imghref = $(this).attr("href");
        $("#actimg").attr("src",imghref);
        $("#actimg").fadeIn();

} и избавьтесь от своей функции showpic ...

0 голосов
/ 30 июля 2011

В jquery для выбора элемента по идентификатору вы используете "#" + селектор идентификатора. 

function showPic (whichpic) {
  $('#actimg').attr("src", whichpic.href).hide().fadeIn(); 
}
0 голосов
/ 30 июля 2011

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

function showPic(whichPic) {
  $('#actimg').fadeOut('fast', function() {
    $('#actimg').attr('src', $(whichPic).attr('href'));
    $('#actimg').fadeIn('fast');
  });
}

Это использует преимущества обратного вызова на fadeOut.Обратный вызов вызывается после завершения анимации.

0 голосов
/ 30 июля 2011 
function showPic (whichpic) {
  if (document.getElementById) {
  $('#actimg').fadeOut('slow');
  document.getElementById('actimg').src = whichpic.href; 
  $('#actimg').fadeIn('slow');
  return false; 
 } else {
  return true;
 } 
}

Я добавил две строки вокруг строки, где вы меняете источник тега #actimg img. Тот, что перед тем, как постепенно исчезает #actimg, и тот, что сразу после того, как он снова возвращается.

---- РЕДАКТИРОВАТЬ ----

изменение: 

  $('#actimg').fadeOut('slow');
  document.getElementById('actimg').src = whichpic.href; 
  $('#actimg').fadeIn('slow');

до: 

  $('#actimg').fadeOut(250);
  setTimeout(function() {
      document.getElementById('actimg').src = whichpic.href; 
      $('#actimg').fadeIn(250);
  }, 250);

Это приведет к исчезновению элемента #actimg, затем изменит источник этого элемента и приведет к исчезновению элемента. Обратите внимание, что длительность fadeOut должна быть такой же или меньше, чем продолжительность тайм-аута, чтобы замирание могло завершиться до изменения источника изображения.

...