jquery onclick淡入淡出效果

我刚刚开始学习jquery，很少有JS知识（长话短说 - 我被告知它有助于提供快捷方式 - 如果我有时间，我会正确地学习JS）。jquery onclick淡入淡出效果

因此，我试图从根本上创建一个滚动字幕或多帧英雄横幅，无论您想要如何调用它。我不想要任何自动化，我正在专门寻找最终用户单击按钮/图像来更改选取框图像。

我有我的jquery的问题，因为我想要求帮助另一件我正在努力，这是隐藏当前显示的图像。

我目前的jquery有什么问题，它不能正常工作？
a。文件加载在页面顶部
b。当我执行这个（$（“＃imgd2”）。fadeIn;）部分的jquery它在萤火虫工作，但在点击功能，它不...
我怎么能去看看什么图像当前正在显示，隐藏并淡入适当的图像。例如，img1默认显示，如果我点击img3，如何隐藏图像1在选取框3中淡出之前？

// HTML - 原谅懒惰
//我显示默认的第一图像和网页上隐藏其他两个图像。

<div style="width: 100%; height: 450px;" id="img-container"> 

<div id="imgd1" style="width: 432px; height: 398px; position: absolute; background-image: url(img1.jpg); background-size: cover;"></div> 
<div id="imgd2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img2.jpg); background-size: cover;"></div> 
<div id="imgd3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img3.jpg); background-size: cover;"></div> 

<div style="position: absolute; top: 438px; left: 322px;" id="bttns"> 
<img id="img1" src="active.png"> 
<img id="img2" src="active.png"> 
<img id="img3" src="active.png"> 
</div> 

</div>

// jQuery的
//上的特定按钮的点击，我想淡入适当的图像

$("#img1").click(function() { 
$("#imgd1").fadeIn; 
}); 

$("#img2").click(function() { 
$("#imgd2").fadeIn; 
}); 

$("#img3").click(function() { 
$("#imgd3").fadeIn; 
});

在此先感谢！

来源

2013-12-10 user2828701

获得可以工作的财产。所以这将是未执行的'jQuery.fadeIn'函数。要执行一个函数，你需要括号。当然，如果你做了'var fi = $（'＃img1'）。淡入; fi（）;'上下文会改变，造成问题，但这将是你稍后会学到的东西。 – PHPglue

fadeIn是一个功能，你需要自行调用它

$("#imgd3").fadeIn();

写每个imgd元素的点击处理程序，您可以针对所有的人（通过添加类imgd）和使用data-*属性来指定要显示的图像（data-target属性和图像的ID）。还可以在所有图像中添加img类，以便我们可以很容易地隐藏它。

<div style="width: 100%; height: 450px;" id="img-container"> 
    <div id="imgd1" class="imgd" style="width: 432px; height: 398px; position: absolute; background-image: url(//placehold.it/432x398/ff0000); background-size: cover;"></div> 
    <div id="imgd2" class="imgd" data-target="#img2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/00ff00); background-size: cover;"></div> 
    <div id="imgd3" class="imgd" data-target="#img3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/0000ff); background-size: cover;"></div> 
    <div style="position: absolute; top: 438px; left: 322px;" id="bttns"> 
     <img id="img1" class="img" data-target="#imgd1" src="//placehold.it/32/ff0000" /> 
     <img id="img2" class="img" data-target="#imgd2" src="//placehold.it/32/00ff00" /> 
     <img id="img3" class="img" data-target="#imgd3" src="//placehold.it/32/0000ff" /> 
    </div> 
</div>

然后

jQuery(function ($) { 
    var $imgds = $('.imgd'); 
    $('.img').click(function() { 
     var $target = $($(this).data('target')); 
     $imgds.not($target).hide(); 
     $target.stop(true, true).fadeIn(); 
    }) 
});

演示：Fiddle

来源

2013-12-10 00:42:57

thx试图帮助！有些东西在这里工作不正常。我注意到了html中数据目标的拼写错误，但那并不奏效。这里有什么想法？这就像我的图像不可点击，使JS工作... – user2828701

@ user2828701对不起，我'imgd'元素可点击而不是'img'元素，请参阅更新和演示 –

@scrowler对不起，这是重复的ID –

:-)

$("#imgd5").fadeIn();

对于问题2..heres我拨弄它必须有一个括号http://jsfiddle.net/5PP4z/2/

来源

2013-12-10 00:45:03 Hellgorithm

它只是问题的一部分... –

@Bonakid thx的帮助。我曾在萤火虫工作过，但不知何故，它被排除在我的职位之外。对第二个问题有什么想法？ – user2828701

我更新了我的答案，希望它有帮助。附：我使用按钮导致我的互联网连接是sloooowww ... – Hellgorithm

jquery onclick淡入淡出效果

回答

相关问题