jquery - 内联脚本到 jQuery 函数以淡化动态页面上的图像

Question

我正在尝试淡入和淡出图像，而不是让它们立即改变(就像它们现在所做的那样)。

有关工作示例，请参阅我的代码笔:http://codepen.io/jsegarra/pen/ExCrj 如果您按一个数字，图像将会改变。

我有一个动态页面，当有人进入页面的元素部分时，有 48 个不同的元素可供查看。 codepen 是这些元素之一的示例。我知道内联 onclick 函数可能不是执行此操作的最佳方法，但我尝试过的每个 jQuery 函数(很多)都无法正常工作。

我希望有一个 jQuery 函数可以控制所有 48 个部分的图像变化，因为我让 jQuery 控制了页面的大部分内容。我最初是这样设置 HTML 的，这种方法可行，但图像会立即发生变化，我需要它们淡入/淡出。

我尝试了很多方法，包括在内联函数中的某处添加 .fadeIn()/Out()。

然后我从 li 中取出这些图像的 src，并在包含的 div 中创建新的 div:

<div class="nextImage secondImage">
    <img src="document.getElementById('br_img').src = 'http://kerlabs.net/wp-content/uploads/2014/03/Scenic-Waterfall-HD-Wallpaper.jpg'" />
</div>

等对于所有 4 个和添加的显示:无；对于 CSS 中的那些人来说，使用这个 jQuery 函数并添加显示:

$(document).ready(function () {
$('.one').click(function () {
    $('.shownImage').fadeOut(300, function () {
        $('.firstImage').fadeIn(500);
    });
});
$('.two').click(function () {
    $('.shownImage').fadeOut(300, function () {
        $('.secondImage').fadeIn(500);
    });
});
$('.three').click(function () {
    $('.shownImage').fadeOut(300, function () {
        $('.thirdImage').fadeIn(500);
    });
});
$('.four').click(function () {
    $('.shownImage').fadeOut(300, function () {
        $('.fourthImage').fadeIn(500);
    });
});
});

那没有做任何事情，我尝试过的 20 种变体也没有做任何事情。我基本上被困住了，需要灵感和帮助。我可能也会研究 CSS3 动画来让它工作，因为 HTML 可以工作，只需要很少的效果。感谢您的帮助!

Answer 1

使用 data-attribute HTML 属性。您可以在其中存储图像链接。 <强> JSFIDDLE

<li class="swap" data-img="http://image-link.jpg">1</li>

var object;
$('.swap').click(function(){
    object = $(this);
    $('#br_img').fadeOut(300, function(){ 
      $('#br_img').attr("src",object.attr("data-img")).fadeIn(300); 
    });
});
// this one jQuery function would set up the elements for all 48 of your 
// portfolio items (no need to duplicate it 48 times) as long as the image 
// URLs are stored in the data-img HTML attributes