Javascript 向普通JS函数添加JQuery效果

我是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;
    }

//对于HTML，“拇指”区域：
//等等
//显示图片的位置：
//JS函数本身：
函数trocafoto（id）{
var x=document.getElementById（id）.src；
document.getElementById（“alvo”）.src=x；
}

我想为之前显示的图像添加JQuery淡出效果，并在函数启动后为最后选定的图像添加淡入效果。但是我没有找到一种将JQuery代码与普通JS混合的方法。。。我怎么能只调用JQuery函数而不需要再次将其指向同一个元素

提前感谢您的帮助

而不是这个

document.getElementById("alvo")

可以使用

$("#alvo")

那么你的情况呢

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

例如，可以使用。

尝试以下方法：

var$alvo=$（'#alvo'）；
$（'.thg'）。在（'click'，function（）上{
var clickedImgSrc=$（this.attr（'src'）；
//第一藏阿尔沃
$alvo.fadeOut（“慢”，函数（）{
//淡出动画完成。
//将新src添加到alvo和fadeIn
$（this.attr（'src'，clickedImgSrc.fadeIn（）；
});
});
如果您使用的是缩略图，则可能会有更高分辨率的图像。

这有利于更快的页面加载！因此，在这种情况下，将更高质量的图像路径存储在
data-*
属性中，如下所示：


var$alvo=$（“#alvo”）；//较大的目标图像
$（“.thg”）。在（“单击”，函数（）{
//首先，确保从服务器加载HQ映像
var img=新图像（）；
$（img）.on（“加载”，函数（）{
//然后把它分配给阿尔沃
$alvo.hide（）.prop（“src”，img.src.fadeIn（）；
});
//从单击的缩略图的数据属性获取路径
img.src=this.dataset.hq；
});



非常感谢！它可以工作：）我需要更好地理解用于嵌套函数的语法和其他一些细节。如果您能在网上找到更多关于这些基础知识的详细信息，我们将不胜感激。例如，$（this）.attr（'src'，clickedImgSrc）.fadeIn（）。再次感谢。@RodrigoCastro不客气！只要用谷歌搜索你们认为你们不懂的东西，试着坚持使用官方文档。在这种情况下，若有些东西不起作用，试着，试着，试着，然后在stackoverflow上询问，有人会帮助你们