Question

我是JQuery的新手（事实上，也是JS的新手），我正在尝试为JS函数添加一个淡入淡出效果，我写的是在另一个图像的“缩略图”时更改照片库中的图像被选中。代码是：

//For HTML - the "thumbs" area:

<img id="g1" class="thg" onclick="trocafoto(this.id)"     src="fotos/sopa.jpg">
<img id="g2"class="thg" onclick="trocafoto(this.id)" src="fotos/salmao.jpg">//and so on

//The place where pictures are displayed:

<img  class="portif" id="alvo" src="fotos/sopa.jpg">

//The JS Function itself: 

function trocafoto(id) {
    var x = document.getElementById(id).src ;
    document.getElementById("alvo").src = x;
    }

我想为显示的上一个图像添加JQuery淡出效果，并在触发功能后为最后选择的图像添加淡入淡出效果。但是我没有找到一种方法将JQuery代码与普通的JS混合使用......我怎样才能只调用JQuery函数而不需要再次将它定位到同一个元素？

提前感谢您的帮助。

Answer 1

试试这个：

var $alvo = $('#alvo');
$('.thg').on('click', function(){
  var clickedImgSrc = $(this).attr('src');
  // first hide alvo
  $alvo.fadeOut( "slow", function() {
      // fadeOut Animation is complete.
      // Add the new src to alvo and fadeIn
      $(this).attr('src', clickedImgSrc).fadeIn();
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="g1" class="thg" src="fotos/sopa.jpg">
<img id="g2" class="thg" src="fotos/salmao.jpg">

<img  class="portif" id="alvo" src="fotos/sopa.jpg">

Answer 2

而不是这个

document.getElementById("alvo")

您可以使用

联系元素

$("#alvo")

所以在你的情况下

$("#alvo").fadeOut();

会起作用。

Answer 3

如果您使用的是缩略图，那么您的确可以使用更高分辨率的图片。这样可以加快页面加载速度！因此，在这种情况下，将更高质量的图像路径存储在data-*属性中，如：

＆＃13;

var $alvo = $("#alvo"); // The larger target image

$(".thg").on("click", function(){
  // First, make sure the HQ image is loaded from the server
  var img = new Image();
  $(img).on("load", function(){
      // Than assign it to #alvo
      $alvo.hide().prop("src", img.src).fadeIn();
  });
  // getting the path from data attribute of the clicked thumbnail
  img.src = this.dataset.hq;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img class="thg" src="//placehold.it/60x60/cf5" data-hq="//placehold.it/400x200/cf5">
<img class="thg" src="//placehold.it/60x60/f5c" data-hq="//placehold.it/400x200/f5c">
<br>
<img id="alvo" src="//placehold.it/400x200/cf5">

＆＃13;

如果您不希望加载图像延迟超过您在循环中预加载所有HQ图像，但这违背了加快页面加载的目的。补救措施可能是在点击缩略图时添加加载微调器。

将JQuery效果添加到普通JS函数

3 个答案: