Javascript CSS过渡及；时机似乎不合适

首先，我愿意接受任何想法/建议。我希望保持主页尽可能使用各种各样的风景图片。我遇到的问题当然是，在一个图像上什么是可读的字体颜色在另一个图像上不是很可读。所以我在谷歌上搜索了一些想法，发现一个黑暗的区域/背景是最专业的。很好，现在它适用于所有亮图像，但不适用于暗图像。所以我想到了根据图像（暗或亮）切换字体颜色和背景的想法。我遇到的问题是，字体/背景切换大约在图像切换前1-2秒？？？此外，我想我想添加一个交叉淡入淡出或一些动画效果，使开关抚慰。以下是网站：

同样，我愿意接受任何想法/建议

因此，我做的第一件事是用深色或浅色前缀命名图像，以便css可以相应地切换。因此，我有20幅左右的图像，命名如下：

Dark_Cover1_PastrDairy.jpg or Light_Cover1_PastrPoultry.jpg

我的CSS是：

/*Back ground shading so we can read text*/
.lighttextbackground
{
color:#000;
background-color:rgba(255, 255, 255, 0.35);
box-shadow:0px 0px 10px 10px rgba(255, 255, 255, 0.35);
}

.lighttextbackground a
{
color:#000;
}

.lighttextbackground p
{
color:#000;
}

.darktextbackground
{
color:#fff;
background-color:rgba(0, 0, 0, 0.35);
box-shadow:0px 0px 10px 10px rgba(0, 0, 0, 0.35);
}

.darktextbackground a
{
color:#fff;
}

.darktextbackground p
{
color:#fff;
}

我希望对其产生效果的典型HTML元素是：

<div id="pageslogan" class="slogan lighttextbackground">
....code...
</div>

所以我想在图像切换时进行交叉淡入淡出。我遇到的难题是如何实施。正如我所写的，html元素用一个新类更新，并且该更改立即应用。如何/在何处实现.fadeOut（）/.fadeIn（）

多谢各位

作为旁注，我尝试将我的网站提交给csscreator.com，以便在没有反馈的情况下对设计进行批评性审查/提出建议。任何建议，我可以得到批评的设计将是有益的

---

编辑 谢谢你，用户3037493和Zeaklous

你们两个都突破了我遇到的障碍。这是你的回答在我脑海中引发的

我添加了一个自定义名称空间（为了可读性）

然后我在ChangeImageHandler中修改了这两行

imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
TextReadabilityHandler(imgName.substring(0, 5));

到

所以整个事情看起来是这样的：

function changeImageHandler(){
        var imgSRC;
        $("#inner ul>li").eq(currImg).addClass("active");
        $("#inner ul>li").eq(prevImg).removeClass("active");


        loadComplete = false;
        image.addClass("topImg").css({"z-index":1});
        imgSRC = imageSRCLink.eq(currImg).attr("href");

        imageHolder.append("<img class='bottomImg' src="+imgSRC+" alt=''>");
        $(".bottomImg").css({display:"none", "z-index":0}).bind("load", loadImageHandler);
        $("#imgSpinner").css({display:"block"}).stop().animate({opacity:1}, 500, "easeOutCubic");


        imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
       txtread.onReady(imgName.substring(0, 5));



        discription.eq(currImg).css({left:$(document).width()*dragDirection, display:"block"}).animate({left:0}, 1000, "easeInOutCubic");
        discription.eq(prevImg).animate({left:$(document).width()*dragDirection*-1}, 1000, "easeInOutCubic", function(){
            discription.eq(prevImg).css({display:"none"})

        });
    }

当然，没有什么东西是完美的，出于某种原因，我还没有弄明白有一个元素没有消失？？这是离题了，所以我在这里发布了一个新的so问题

---

对不起，我没有足够的声誉来评论你的问题，而这个答案实际上只是一个评论。。。。带黑色背景的白色文本将更容易阅读。这是一个JSfiddle 基本上，你的.p标语的css将使颜色为白色，并添加此文本阴影

{text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;}

---

编辑以添加：要在图像之前更改textbackground，请在changeImageHandler函数的开头调用TEXTREADABILITYHANDLER，并可能尝试在imgSpinner.animate per上设置延迟。您可以尝试自己执行此操作并描述，但根据图像的不同，它可能会比使用实际插件时更不正确

这是我可能会推荐的。这并不完全是你所要求的，但它改变了元素的背景以及上面的文本。另外，您只需声明

BackgroundCheck.init({
  targets: '.ui', // Select the divs to have the background changed
  images: '.thumbnail' // Select the list of images to be analyzed
});

imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
txtread.onReady(imgName.substring(0, 5));

function changeImageHandler(){
        var imgSRC;
        $("#inner ul>li").eq(currImg).addClass("active");
        $("#inner ul>li").eq(prevImg).removeClass("active");


        loadComplete = false;
        image.addClass("topImg").css({"z-index":1});
        imgSRC = imageSRCLink.eq(currImg).attr("href");

        imageHolder.append("<img class='bottomImg' src="+imgSRC+" alt=''>");
        $(".bottomImg").css({display:"none", "z-index":0}).bind("load", loadImageHandler);
        $("#imgSpinner").css({display:"block"}).stop().animate({opacity:1}, 500, "easeOutCubic");


        imgName = imageSRCLink.eq(currImg).attr("href").split('/')[2];
       txtread.onReady(imgName.substring(0, 5));



        discription.eq(currImg).css({left:$(document).width()*dragDirection, display:"block"}).animate({left:0}, 1000, "easeInOutCubic");
        discription.eq(prevImg).animate({left:$(document).width()*dragDirection*-1}, 1000, "easeInOutCubic", function(){
            discription.eq(prevImg).css({display:"none"})

        });
    }

$("#sitecopy").fadeOut(1550, txtread.TextReadabilityHandler(_imgname));

{text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;}

BackgroundCheck.init({
  targets: '.ui', // Select the divs to have the background changed
  images: '.thumbnail' // Select the list of images to be analyzed
});